实现一个简单的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">
</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;
}
效果: