PHP(PDO)-MySQL-jQuery Ajax getJSON综合示例

其他 2018-10-18 19:03:54 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/laoyaotask/article/details/71247883

实现一个简单的mysql数据库内容管理功能。通过jQuery的Ajax实现单页应用。具体代码如下：
0.创建数据库代码

-- phpMyAdmin SQL Dump
-- version phpStudy 2014
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2017 年 05 月 06 日 02:57
-- 服务器版本: 5.5.35
-- PHP 版本: 5.3.28

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- 数据库: `test`
--
CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `test`;

-- --------------------------------------------------------

--
-- 表的结构 `news`
--
-- 创建时间: 2017 年 05 月 05 日 15:09
-- 最后更新: 2017 年 05 月 05 日 18:15
--

CREATE TABLE IF NOT EXISTS `news` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) COLLATE utf8_bin NOT NULL,
  `content` text COLLATE utf8_bin NOT NULL,
  `author` varchar(100) COLLATE utf8_bin NOT NULL,
  `postTime` datetime NOT NULL,
  `clickRate` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=4 ;

--
-- 转存表中的数据 `news`
--

INSERT INTO `news` (`id`, `title`, `content`, `author`, `postTime`, `clickRate`) VALUES
(1, '中华人民共和国', '311111', '11111', '2017-05-06 00:00:00', 0),
(2, '2222222222', '2222', '2', '2017-05-06 00:00:00', 0),
(3, '3333333333', '3', '3', '2017-05-06 00:00:00', 0);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

1.index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>PHP-MySQL-jQuery Ajax简单示例</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
       <h1>数据表内容的操作</h1>
       <fieldset>
           <legend>已有内容列表</legend>
           <ul id="listBox">
           </ul>
       </fieldset>
       <fieldset>
            <legend>编辑区域</legend>
            <div id="editBox">
                <!--下面这个类型为hidden的input用于修改记录时记下记录的id值，页面上是不可见的-->
                <input type="hidden" name="newsId" id="newsId" value="" />
                <table>
                    <tr>
                        <th>标题</th>
                        <td><input type="text" name="newsTitle" id="newsTitle" value="" /></td>
                    </tr>
                    <tr>
                        <th>内容</th>
                        <td><textarea id="newsContent"></textarea></td>
                    </tr>
                    <tr>
                        <th>作者</th>
                        <td><input type="text" name="newsAuthor" id="newsAuthor" value="" /></td>
                    </tr>
                    <tr>
                        <th>日期</th>
                        <td><input type="text" name="newsPostTime" id="newsPostTime" value="" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><button id="add">新增</button><button id="update">修改</button><button id="reset">清空</button></td>
                    </tr>
                </table>
                <div id="tip">
                    &nbsp;
                </div>
            </div>
       </fieldset>
    </body>
</html>

2.js/index.js

$(function() {
    //初始化时调用读取函数 读取已有记录
    loadListBox();

    //点击“新增”按钮事件
    $("#add").click(function(){
        addNewRecord(); //调用方法（函数）

    //点击“修改”按钮事件
    $("#update").click(function(){
        updateRecord();//调用方法（函数）
    })

    //点击“清空”按钮事件
    $("#reset").click(function(){
        $("#editBox input").val(""); //将#editBox下包含的所有input标签的值置为空
        $("#editBox input:eq(1)").focus(); //使#editBox下的第2个input（因为第一个input是hidden），即标题后的方框获得焦点
    })

    //读取已有记录的方法
    function loadListBox() {
        /*
         方法名：$.getJSON()
         参数：(url,data,function)
         参数含义：url：能够处理数据的动态页面文件,如xxx.php；
             data:要发送给上述页面处理的参数，格式为：{key:value,key:value,...}。其中key作为变量名在php页面中可据此接收变量值。
             function：动态页面文件处理成功后的返回函数，可以有参数，参数为动态页面的返回值（json格式），常用于对返回值进行显示处理。
         * */
        $.getJSON("php/index.php", {
            act: "read"
        }, function(rs) { //rs为上述index.php页面处理的的返回值
            $tempStr = "";//临时字符串变量
            if(rs.data.length == 0) { //如果返回值中data元素的长度为为0，说明返回值为空。data元素在php代码中定义
                $tempStr = "<li>暂无数据</li>";
            }
            else//否则说明返回值不为空
            {
                for(i in rs.data) {//通过循环，根据返回值生成html字符串
                    //下句中把buton的name属性设置为当前记录的id值，用特殊用途
                    $tempStr += "<li><a href='read.html?id="+rs.data[i]['id']+"'>" + rs.data[i]['title'] + "</a> <button name="+rs.data[i]['id']+">修改</button></li>";
                }
            }
            $("#listBox").html($tempStr);//把得到的html字符串显示到#listBox中

            //紧接着，下用的代码用于实现用户点击某记录后的“修改”按钮后，把该条记录已有内容填入右侧表单中
            $("#listBox li").each(function(){ //遍历li
                $(this).find("button").on("click",function(){ //在当前li中找出button元素，并绑定单击事件
                    var curId=$(this).prop("name"); //获取当前按钮的name属性值，即当前记录的id值
                    //获取当前记录的全部内容，并显示在表单中
                    $.getJSON("php/index.php",{act:"pullSingleRecord",id: curId},function  (rs) {
                        if(rs.data.length==0)//判断返回值是否为空。如果为空，
                        {
                            $("#tip").delay(0).fadeIn();//显示用于提示的元素
                            $("#tip").text("数据拉取失败，请重试或联系管理员。");//设置提示信息
                            $("#tip").delay(5000).fadeOut();//5秒后，提示元素消失
                        }
                        else //如果返回值不为空
                        {
                            //把返回值填入表单中
                            $("#newsId").val(curId);
                            $("#newsTitle").val(rs.data[0]['title']);
                            $("#newsContent").val(rs.data[0]['content']);
                            $("#newsAuthor").val(rs.data[0]['author']);
                            $("#newsPostTime").val(rs.data[0]['postTime']);
                            //显示提示信息
                            $("#tip").delay(0).fadeIn();
                            $("#tip").text("数据拉取成功，请直接修改各字段内容，完成后点击“修改”按钮。");
                            $("#tip").delay(5000).fadeOut();
                        }
                    })
                })
            })
        })
    }

    //新增记录的方法
    function addNewRecord()
    {
        $.getJSON("php/index.php",{act:"add",title:$("#newsTitle").val(),content:$("#newsContent").val(),author:$("#newsAuthor").val(),postTime:$("#newsPostTime").val()},function(rs){
            if(rs.status=="ok") //如果返回值中status值为ok，说明执行成功
            {
                loadListBox();//刷新列表栏
                //显示提示信息
                $("#tip").delay(0).fadeIn();
                $("#tip").text("成功新增一条记录。");
                $("#tip").delay(5000).fadeOut();
            }
            else //否则
            {
                //只显示提示信息，不用刷新列表栏
                $("#tip").delay(0).fadeIn();
                $("#tip").text("新增记录失败，请重试或联系管理员。");
                $("#tip").delay(5000).fadeOut();
            }

        });
    }

    //修改记录的方法
    function updateRecord () {
        //修改记录时，需要把表单中的内容提交到php页面。
        $.getJSON("php/index.php",{act:"update",id:$("#newsId").val(),title:$("#newsTitle").val(),content:$("#newsContent").val(),author:$("#newsAuthor").val(),postTime:$("#newsPostTime").val()},function(rs){
            if(rs.status=="ok")
            {
                loadListBox();
                $("#tip").delay(0).fadeIn();
                $("#tip").text("成功修改一条记录。");
                $("#tip").delay(5000).fadeOut();
            }
            else
            {
                $("#tip").delay(0).fadeIn();
                $("#tip").text("修改记录失败，请重试或联系管理员。");
                $("#tip").delay(5000).fadeOut();
            }
        })
    }
})

3.php/index.php

<?php
$dbh=new PDO("mysql:host=localhost;dbname=test","root","root");//pdo方式建立数据库连接
$dbh->query("set names utf8");//设置数据库端的字符编码为utf8，必须这样写，否则页面显示的汉字为乱码

//以下语句中的$_GET['act']变量是接收js传来的用户操作类型值
if(@$_GET['act']=='read') //如果用户操作类型是读取已有内容
{
    $sql="select * from news"; //查询已有内容的sql语句
    $rs=$dbh->query($sql)->fetchAll();//执行sql

    //返回查询结果。由于js代码中是用getJSON来请求php代码的，所以php页面的处理结果必须为json格式，否则js无法接收
    //json_encode()函数的作用是把变量格式化为json类型。array函数是把参数变量转为数组类型；"data"=>$rs是在json中创建一个key-value对
    //可以看出，data键的值是查询结果，sql键的值是sql语句本身
    echo json_encode(array("data"=>$rs,"sql"=>$sql));
}

//新增记录
else if(@$_GET['act']=='add') //如果用户操作类型是新增记录，即点击了“新增”按钮
{
    //获取用户在表单中输入的值。注意与js中变量名称要一致
    $newTitle=@$_GET['title'];
    $newContent=@$_GET['content'];
    $newAuthor=@$_GET['author'];
    $newPostTime=@$_GET['postTime'];
    $sql="insert into news values(null,'$newTitle','$newContent','$newAuthor','$newPostTime',0)";
    $rs=$dbh->exec($sql);//注意执行insert update的方法与执行select不同。这里的返回值是多少行受影响。
    if($rs==1) //如果有一行受到影响，说明此条记录修改成功
        //设置返回值
        echo json_encode(array("sql"=>$sql,"status"=>"ok"));
    else //如果没有任何一行受到影响，说明修改失败
        echo json_encode(array("sql"=>$sql,"status"=>"fail"));
}
//拉取要修改的记录
else if(@$_GET['act']=="pullSingleRecord") //说明用户点击了某条记录后的“修改”按钮
{
    $sql="select * from news where id=".@$_GET['id'];//注意后面要接收js传来的当前记录的id值
    $rs=$dbh->query($sql)->fetchAll();//查询该id的所有字段值
    //返回查询结果
    echo json_encode(array("data"=>$rs,"sql"=>$sql));
}
//修改记录
else if(@$_GET['act']=='update')//说明用户点击了表单下面的“修改按钮”
{
    //获取用户在表单中输入的值。注意一定要接收js传来的当前记录的id值
    $newsId=@$_GET['id'];
    $newTitle=@$_GET['title'];
    $newContent=@$_GET['content'];
    $newAuthor=@$_GET['author'];
    $newPostTime=@$_GET['postTime'];
    //注意此sql语句后面的where条件的写法，由于id字段是int型，所以不能在外层加''
    $sql="update news set title='$newTitle',content='$newContent',author='$newAuthor',postTime='$newPostTime' where id=$newsId";
    $rs=$dbh->exec($sql);
    if($rs==1)
        echo json_encode(array("sql"=>$sql,"status"=>"ok"));
    else
        echo json_encode(array("sql"=>$sql,"status"=>"fail"));
}

?>

4.css/index.css

body{
    margin: 0px;
    font:16px "microsoft yahei";
}
h1
{
    font:bold 20px "microsoft yahei";
}
fieldset
{
    width: 44%;
    margin: 5px;
    float: left;
    border-radius: 5px;
}
legend
{
    color: #1f80bf;
    font-weight:bold;
}
ul,li
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

效果：
这里写图片描述

猜你喜欢

转载自blog.csdn.net/laoyaotask/article/details/71247883
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022