PHP+MySQL+AJAX+JSON简单实例
建立数据库：
DROP SCHEMA IF EXISTS tt;
CREATE SCHEMA IF NOT EXISTS tt;
USE tt;
DROP TABLE IF EXISTS t_course;
CREATE TABLE IF NOT EXISTS t_course(
course_id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
course_num varchar(30) NOT NULL,
course_name VARCHAR(150) NOT NULL,
course_time SMALLINT UNSIGNED NOT NULL DEFAULT 20,
course_credit DECIMAL(2,1) UNSIGNED NOT NULL DEFAULT 0,
course_property varchar(30) NOT NULL
)ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES("091M5002H","TCP/IP协议及网络编程技术",40,2.0,"专业普及课");
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES("201M5015H","操作系统安全",40,2.0,"专业普及课");
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES("201M5016H","高级计算机体系结构",40,2.0,"专业普及课");
INSERT t_course (course_num,course_name,course_time,course_credit,course_property) VALUES("15MGB003H-07","英语-C",40,2.0,"专业必修课");
index.html文件：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>课程管理</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="container"> <h2>课程管理</h2> </div> <div class="container"> <div class="course"> <table class="data"> <tr> <td>课程编号</td> <td style="width:300px">课程名称</td> <td>课时</td> <td>学分</td> <td style="width:300px">课程属性</td> <td style="width:240px;"> <a id="addCourse" class="addCourse" href="javascript:;"/>添加课程</a> </td> </tr> </table> </div> </div> <script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script> <script type="text/javascript" src="js/course.js"> </script> </body> </html>
main.css文件：
body{
background-color:#ffffff;
text-align:center;
}
.container {
margin-top:60px;
}
.course{
margin-left:30px;
}
td {
font-size:20px;
width:200px;
height:40px;
text-align:center;
color:black;
background-color:white;
}
.addCourse:hover{
background-color:#aaaacc;
}
.addCourse{
text-decoration:none;
cursor:pointer;
}
input.txtField{
width:100px;
height:30px;
}js文件：
首先去jquery官网http://jquery.com/下载：
jquery-3.1.1.min.js
jquery-3.1.1.js
二者的不同请问搜索引擎
course.js:
$(function(){
var g_table = $("table.data");
var init_data_url = "data.php?action=init_data_list";
$.get(init_data_url,function(data){
var row_items = $.parseJSON(data);
for( var i = 0 , j = row_items.length ; i < j ; i++) {
var data_dom = create_row(row_items[i]);
g_table.append(data_dom);
}
});
function create_row(data_item){
var row_obj = $("<tr></tr>");
for(var k in data_item){
if("course_id" != k){
var col_td = $("<td></td>")
col_td.html(data_item[k]);
row_obj.append(col_td);
}
}
//delButton
var delButton = $("<a class="optLink" href="javascript:;">删除 </a>");
delButton.attr("dataid",data_item["course_id"]);
delButton.click(delHandler);
//editButton
var editButton = $("<a class="optLink" href="javascript:;">编辑 </a>");
editButton.attr("dataid",data_item["course_id"]);
editButton.click(editHandler);
var opt_td = $("<td></td>");
opt_td.append(delButton);
opt_td.append(editButton);
row_obj.append(opt_td);
return row_obj;
}
//delHandler
function delHandler(){
var data_id = $(this).attr("dataid");
var meButton = $(this);
$.post("data.php?action=del_row",{dataid:data_id},function(res){
if("ok" == res) {
$(meButton).parent().parent().remove();
} else {
alert("删除失败!");
}
});
}
//editHandler
function editHandler(){
var data_id = $(this).attr("dataid");
var meButton = $(this);
var meRow = $(this).parent().parent();
var editRow = $("<tr></tr>");
for(var i = 0 ; i < 5 ; i++){
var editTd = $("<td><input type="text" class="txtField"/></td>");
var v = meRow.find("td:eq("+i+")").html();
editTd.find("input").val(v);
editRow.append(editTd);
}
var opt_td = $("<td></td>");
//saveButton
var saveButton = $("<a href="javascript:;" class="optLink">保存 </a>");
saveButton.click(function(){
var currentRow = $(this).parent().parent();
var input_fields = currentRow.find("input");
var post_fields = {};
post_fields["course_num"] = input_fields[0].value;
post_fields["course_name"] = input_fields[1].value;
post_fields["course_time"] = input_fields[2].value;
post_fields["course_credit"] = input_fields[3].value;
post_fields["course_property"] = input_fields[4].value;
post_fields["course_id"] = data_id;
$.post("data.php?action=edit_row",post_fields,function(res){
if("ok" == res){
var newUpdateRow = create_row(post_fields);
currentRow.replaceWith(newUpdateRow);
} else {
alert("数据更新失败!");
}
});
});
//cancelButton
var cancelButton = $("<a href="javascript:;" class="optLink">取消 </a>");
cancelButton.click(function(){
var currentRow = $(this).parent().parent();
meRow.find("a:eq(0)").click(delHandler);
meRow.find("a:eq(1)").click(editHandler);
currentRow.replaceWith(meRow);
});
opt_td.append(saveButton);
opt_td.append(cancelButton);
editRow.append(opt_td);
meRow.replaceWith(editRow);
}
//addCourse
$("#addCourse").click(function(){
var addRow = $("<tr></tr>");
for(var i = 0 ; i < 5 ; i++){
var col_td = $("<td><input type="text" class="txtField"/></td>");
addRow.append(col_td);
}
var col_opt = $("<td></td>");
//confirmButton
var confirmBtn = $("<a href="javascript:;" class="optLink">确认 </a>");
confirmBtn.click(function(){
var currentRow = $(this).parent().parent();
var input_fields = currentRow.find("input");
var post_fields = {};
post_fields["course_num"] = input_fields[0].value;
post_fields["course_name"] = input_fields[1].value;
post_fields["course_time"] = input_fields[2].value;
post_fields["course_credit"] = input_fields[3].value;
post_fields["course_property"] = input_fields[4].value;
$.post("data.php?action=add_row",post_fields,function(res){
if(0 < res){
post_fields["course_id"] = res;
var postAddRow = create_row(post_fields);
currentRow.replaceWith(postAddRow);
} else {
alert("插入失败!");
}
});
});
//cancelButton
var cancelBtn = $("<a href="javascript:;" class="optLink">取消 </a>");
cancelBtn.click(function(){
$(this).parent().parent().remove();
});
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
g_table.append(addRow);
});
});LAMP实验环境
在浏览器地址栏输入：localhost/course.结果如下，可以实现实时编辑表格，添加课程，其中用到了ajax异步请求，数据传输过程用到了json的数据格式
小实验基本结构：
——css
——main.css
——js
——jquery-3.1.1.min.js
——data.php
——index.html
参考：http://www.imooc.com/learn/754，PHP+AJAX实现表格实时编辑
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
