一、实验介绍
1.1 实验内容
利用PHP 来制作一个通过ajax 来传递数据的可实时编辑的表格。
1.2 实验知识点
- 熟练对 php+ajax 的使用
- 对 jquery 的操作巩固
1.3 实验环境
- 实验楼在线环境：Ubuntu 14.04.5
- apache: apache 2.4.7
- PHP ：PHP5.5.9
- 代码编辑器：
brackets文本编辑器或其他。
1.4 适合人群
本课程难度为一般，适合具有 PHP 基础的用户，熟悉 PHP 基础知识加深巩固，同时也要求学生有 jquery 相关的基础知识。
二、实验原理
通过 ajax 来传递数据，返回给浏览器的数据通过 jquery 的相关操作展现出来。
三、开发准备
首先打开 Xfce终端 ，启动服务
启动 Apache 服务器:
$ sudo service apache2 start
启动数据库 Mysql:
$ sudo service mysql start
我们使用的是 Apache 服务器，所以为了访问的方便，我们需要将我们的代码文件放到它的根目录下。 Apache 默认的 web 根目录位于 /var/www/html 。因为我们要在该目录下写入文件，所以首先我们需要修改 html 目录的权限：
$ sudo chmod -R 777 /var/www/html
在目录 /var/www/html 下，需要下载相关文件
首先进入 /var/www/html 目录
$ cd /var/www/html
然后再下载图片
$ wget http://labfile.oss.aliyuncs.com/courses/1002/cell-blue.jpg
$ wget http://labfile.oss.aliyuncs.com/courses/1002/cell-grey.jpg
$ wget http://labfile.oss.aliyuncs.com/courses/1002/jquery.min.js
四、项目文件结构
五、实验步骤
通过 brackets 编辑器打开文件夹 /var/www/html ，
并创建文件 index.php
编辑 文件 index.php
首先把表格的页面写出来
<html>
<head>
<meta charset="utf-8">
<title>实时编辑表格</title>
</head>
<body>
<div class="container">
<table class="data">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>
<a id="addBtn" href="javascript:;"/>添加</a>
</th>
</tr>
</table>
</div>
</body>
</html>
然后打开火狐浏览器输入地址 localhost/index.php
此时感觉这表格实在是太不好看了。
接下来通过css优化一下样式。
为了保持文章的篇幅简洁，我会将一些不必要的代码使用竖排的 . 来代替，你在复制本文代码块的时候，切记不要将 . 也一同复制进去。切记在使用的时候记得比对自己现已有的代码。只需要复制所需要的代码即可。以及复制过去的代码中，中文会以 ??? 的形式显示，如果有影响到程序，需要自己手动输入
编辑 文件 index.php
·
·
·
<title>实时编辑表格</title>
<style type="text/css">
table.data {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.data th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
width:190px;
}
table.data td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
width:190px;
text-align:center;
}
table.data th a, table.data td a{
text-decoration:none;
color:green;
}
</style>
</head>
·
·
·
这下就感觉还不错。接下来我们需要操作mysql数据库，建一张学生表。
操作 Xfce终端
$ mysql -u root
进入mysql终端
首先创建数据库 tables
> create database tables;
进入数据库 tables
> use tables;
创建表 student
create table student( id int(11) not null primary key auto_increment, name varchar(32) not null, age int(3) not null );
好了，表也创建好了。
接下来就先对 添加 数据来做操作。
编辑 文件 index.php
·
·
·
</body>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript">
$(function() {
// 获取class为data的对象<table>
var g_table=$("table.data");
$("#addBtn").click(function(){
// 创建前2个<td>
var addRow=$("<tr></tr>");
for(var i=0;i<2;i++){
var col_td=$("<td><input class='txtField' type='text' value='' /></td>");
addRow.append(col_td);
}
// 创建第3个<td>
var col_opt=$("<td></td>");
var confirmBtn=$("<a href='javascript:;'>确认 </a>");
confirmBtn.click(function(){
// 获取当前对象<tr>
var currentRow=$(this).parent().parent();
// 遍历出当前对象<tr>的所有<input>
var input_data=currentRow.find("input");
var post_data={};
//遍历该行的数据，装入post_data数组中
for(var i=0,j=input_data.length;i<j;i++){
post_data['col_'+i]=input_data[i].value;
}
//ajax
$.ajax({
type: "POST",
url: 'indexController.php',
dataType: 'json',
cache: false,
data: {
action:'add',
post_data:post_data
},
success: function(data) {
alert(data);
},
});
});
var cancelBtn=$("<a href='javascript:;'>取消</a>");
cancelBtn.click(function(){
// 取消就删除刚添加的空行
$(this).parent().parent().remove();
});
// 拼接好新的的行，然后替换
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
g_table.append(addRow);
});
/**
* edit 编辑
*/
function edit(){
}
/**
* del 删除
*/
function del(){
}
});
</script>
</html>
再 创建 文件 indexController.php
编辑 文件 indexController.php
<?php $action = $_REQUEST['action']; var_dump($action); var_dump($_POST['post_data']);
通过火狐浏览器的F12调试器，查看可知，我们所输入的数据和需要的参数都都传递给了后端页面了。
编辑 文件 indexController.php （这里需要覆盖之前的代码）
<?php
$action = $_REQUEST['action'];
echo json_encode("ceshi");
通过对字符串 ceshi 转为json格式，前端页面接收到数据并可以打印出来。
接下来把传输过来的数据添加到数据库中。
编辑 文件 indexController.php （这里需要覆盖之前的代码）
<?php
$action = $_REQUEST['action'];
// 通过传递过来的action参数来对应相对应的操作
switch($action) {
case 'show':
show();
break;
case 'add':
add();
break;
case 'edit':
edit();
break;
case 'del':
del();
break;
}
/**
* show 数据展示
*/
function show(){
}
/**
* add 数据添加
*/
function add() {
$name = $_POST['post_data']['col_0'];
$age = $_POST['post_data']['col_1'];
$sql = "INSERT INTO `student` (name, age) VALUES ('{$name}', '{$age}')";
if($res=mysqli($sql)){
// 获取最后一次插入数据的id
$sql2 = 'SELECT `id` FROM `student` ORDER BY `id` DESC LIMIT 1';
$res2 = mysqli($sql2);
$id = $res2->fetch_assoc();
echo $id['id'];
}else{
echo 0;
}
}
/**
* edit 数据修改
*/
function edit(){
}
/**
* del 数据删除
*/
function del(){
}
/**
* mysqli mysqli数据库操作
* @param $sql sql语句
* @return mixed
*/
function mysqli($sql){
$mysqli = new mysqli("localhost", "root", "", "tables");
$mysqli->query("set names utf8");
$query = $mysqli->query($sql);
$mysqli->close();
return $query;
}
通过浏览器进行添加操作，点击确定之后，因为我们返回的是表的id,所以第一次添加出来的是 1 的弹框。
然后我们通过 Xfce终端 查看一下我们刚刚添加的数据。
发现中文乱码。出现了问题，需要我们去解决。
首先查看数据库的编码格式
> show variables like 'char%';
然后后修改编码格式
> set character_set_database = utf8;
> set character_set_server = utf8;
再查看建库语句
> show create database tables;
修改编码
> alter database `tables` default character set utf8 collate utf8_general_ci;
然后在查看建表语句
> show create table tables.student;
修改编码
> alter table `student` default character set utf8 collate utf8_general_ci;
最后查看表字段
> show full columns from tables.student;
修改编码
> alter table `student` change name name varchar(32) character set utf8 collate utf8_general_ci;
清空表数据
> truncate student;
打开浏览器添加数据
重新插入数据
然后查看数据库数据
接下来就需要数据库的数据展现的网页上
编辑 文件 index.php 在原有代码基础上进行，新增代码片段注意查看代码注释
·
·
·
$(function() {
// 获取class为data的对象<table>
var g_table=$("table.data");
// 在原有代码基础添加以下代码
// ajax 数据初始化展示
$.ajax({
type: "GET",
url: 'indexController.php',
dataType: 'json',
cache: false,
data: {
action:'show'
},
success: function(data) {
for(var i=0,j=data.length;i<j;i++){
var data_dom=create_row(data[i]);
g_table.append(data_dom);
}
},
});
//添加代码到此结束
$("#addBtn").click(function(){
·
·
·
function del(){
}
// 在原有代码基础添加以下代码
/**
* create_row 把数据进行相应的格式展现出来
* @param data_item 数据对象
* @return string 返回拼接好的html
*/
function create_row(data_item){
var row_obj=$("<tr></tr>");
for(var k in data_item){
if("id" != k){
var col_td=$("<td></td>");
col_td.html(data_item[k]);
row_obj.append(col_td);
}
}
var editButton=$("<a href='javascript:;'>编辑 |</a>");
editButton.attr("dataid",data_item['id']);
editButton.click(edit);
var delButton=$("<a href='javascript:;'> 删除 </a>");
delButton.attr("dataid",data_item['id']);
delButton.click(del);
var opt_td=$("<td></td>");
opt_td.append(editButton);
opt_td.append(delButton);
row_obj.append(opt_td);
return row_obj;
}
//添加代码到此结束
});
</script>
</body>
</html>
编辑 文件 indexController.php
编写 show 函数
·
·
·
/**
* show 数据展示
*/
function show() {
$sql = "SELECT * FROM `student`";
$res = mysqli($sql);
while($row = $res->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
}
·
·
·
通过浏览器输入地址 localhost/index.php 查看效果
另外目前添加会出现一个问题：添加之后会弹框之后然后点击刷新整个页面之后才可以看到插入的数据。这样的话用户的体验很不好。
对此需要优化，ajax成功后的操作
编辑 文件 index.php 对代码进行修改，添加代码片段注意查看代码注释
·
·
·
$("#addBtn").click(function(){
// 创建前2个<td>
var addRow=$("<tr></tr>");
for(var i=0;i<2;i++){
var col_td=$("<td><input class='txtField' type='text' value='' /></td>");
addRow.append(col_td);
}
// 创建第3个<td>
var col_opt=$("<td></td>");
var confirmBtn=$("<a href='javascript:;'>确认 </a>");
confirmBtn.click(function(){
// 获取当前对象<tr>
var currentRow=$(this).parent().parent();
// 遍历出当前对象<tr>的所有<input>
var input_data=currentRow.find("input");
var post_data={};
//遍历该行的数据，装入post_data数组中
for(var i=0,j=input_data.length;i<j;i++){
post_data['col_'+i]=input_data[i].value;
}
//ajax
$.ajax({
type: "POST",
url: 'indexController.php',
dataType: 'json',
cache: false,
data: {
action:'add',
post_data:post_data
},
// 在原有代码基础上修改以下代码
success: function(data) {
if(data>0){
post_data['id']=data;
// 得到新的拼接好的html，并替换
var postAddRow=create_row(post_data);
currentRow.replaceWith(postAddRow);
}else{
alert('添加失败！');
}
},
});
//需要修改的代码到此结束
});
var cancelBtn=$("<a href='javascript:;'>取消</a>");
cancelBtn.click(function(){
// 取消就删除刚添加的空行
$(this).parent().parent().remove();
});
// 拼接好新的的行，然后替换
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
g_table.append(addRow);
});
·
·
·
此时再次操作添加流程，点击确定之后，就直接把数据显示到表格中了。
再接下来就进行 编辑 操作
编辑 文件 index.php
编写 edit 函数
·
·
·
/**
* edit 编辑
*/
function edit() {
// 获取当前对象<a>属性dataid的值
var data_id=$(this).attr("dataid");
// 获取当前对象<a>
var meButton=$(this);
// 获取当前对象<tr>
var meRow=$(this).parent().parent();
var editRow=$("<tr></tr>");
// 将原来的td中的值，提取出来，添加到editTd的value中，最后插入到editRow中
for(var i=0;i<2;i++){
var editTd=$("<td><input type='text'/></td>");
var v=meRow.find('td:eq('+i+')').html();
editTd.find('input').val(v);
editRow.append(editTd);
}
var opt_td=$("<td></td>");
var saveButton=$("<a href='javascript:;'>保存 </a>");
saveButton.click(function(){
//获取当前对象<tr>
var currentRow=$(this).parent().parent();
// 遍历出当前对象<tr>的所有<input>
var input=currentRow.find("input");
var post_data={};
//遍历该行的数据，装入post_data数组中
for(var i=0,j=input.length;i<j;i++){
post_data['col_'+i]=input[i].value;
}
post_data['id'] = data_id;
// ajax
$.ajax({
type: "POST",
url: 'indexController.php',
dataType: 'json',
cache: false,
data: {
action:'edit',
post_data:post_data
},
success: function(data) {
if(data == '1'){
// 得到新的拼接好的html，并替换
var updateRow=create_row(post_data);
currentRow.replaceWith(updateRow);
}else{
alert('编辑失败！');
}
},
});
});
var cancelButton=$("<a href='javascript:;'>取消</a>");
cancelButton.click(function(){
var currentRow=$(this).parent().parent();
// 给当前对象<tr>，更换点击事件为edit和del
meRow.find('a:eq(0)').click(edit);
meRow.find('a:eq(1)').click(del);
currentRow.replaceWith(meRow);
});
// 拼接好新的的行，然后替换
opt_td.append(saveButton);
opt_td.append(cancelButton);
editRow.append(opt_td);
meRow.replaceWith(editRow);
}
·
·
·
编辑 文件 indexController.php
编写 edit 函数
·
·
·
/**
* edit 数据修改
*/
function edit() {
$id = $_POST['post_data']['id'];
$name = $_POST['post_data']['col_0'];
$age = $_POST['post_data']['col_1'];
$sql = "UPDATE `student` SET name='{$name}',age={$age} WHERE id={$id}";
if(mysqli($sql)){
echo 1;
}else{
echo 0;
}
}
·
·
·
然后通过浏览器进行编辑操作，并可以查看表 student 是否已经修改。
最后进行 删除 操作
编辑 文件 index.php
编写 del 函数
·
·
·
/**
* del 删除
*/
function del() {
// 获取当前对象<a>属性dataid的值
var data_id=$(this).attr("dataid");
// 获取当前对象<a>
var meButton=$(this);
// 弹出选择框
if(confirm("确认要删除？")){
// ajax post 操作
$.ajax({
type: "POST",
url: 'indexController.php',
dataType: 'json',
cache: false,
data: {
action:'del',
id:data_id,
},
success: function(data) {
if(data == '1'){
// 删除当前行tr
$(meButton).parent().parent().remove();
}else{
alert('删除失败！');
}
},
});
}
}
·
·
·
编辑 文件 indexController.php
编写 del 函数
·
·
·
/**
* del 数据删除
*/
function del() {
$id = $_POST['id'];
$sql="DELETE FROM `student` WHERE id={$id}";
if(mysqli($sql)){
echo 1;
}else{
echo 0;
}
}
·
·
·
打开浏览器进行删除操作，并可以查看表 student 是否已经删除。
六、实验总结
本次的PHP + Ajax的实时表格编辑就到此结束了。该课程是对ajax的应用和对jquery的操作，然后就是php后台的相关操作。ajax的应用到的地方还是有很多的。相信你学会了该实验的流程，对其他的ajax的类似应用应该有了一定的了解。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。