PHP+JQ+AJAX+json 数据库实时动态增删改查
2017-10-20 18:00
471 查看
PHP+JQ+AJAX+json 数据库动态增删改查
数据库
id为主键，自动增长。
html部分
三个form表单，分别用来增加、查询和修改。refreash()用来刷新表。一打开页面、插入、修改、删除成功后都会调用。
insert（）、myQuery（）、myChange()、myDelete（）顾名思义。
修改部分是点击表格内的修改按钮，传数据到上方的修改框，作出修改后点击form的修改按钮，传数据到对应的php文件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<form>
name: <input type="text" name="mname" id="mname"/>
age: <input type="text" name="age" id="age"/>
job: <input type="text" name="job" id="job"/>
<input type="submit" id="btn"/>
</form>
<form>
name: <input type="text" name="mname" id="qmname"/>
age: <input type="text" name="age" id="qage"/>
job: <input type="text" name="job" id="qjob"/>
<input type="button" id="qbtn" value="查询"/>
</form>
<form>
name: <input type="text" name="mname" id="cmname"/>
age: <input type="text" name="age" id="cage"/>
job: <input type="text" name="job" id="cjob"/>
<input type="submit" id="cbtn" value="修改"/>
</form>
<ul id="list">
<!--数据将在这里显示-->
</ul>
<script type="text/javascript">
function refreash() {
$('table').remove();
$.ajax({
type: "post",//传递方法
url: "phpToAjax.php",//数据接口
dataType: "json",//接收格式
success: function(msg)//如果接收成功执行以下
{
$("body").append("<table id='member'><tr><th>id</th><th>name</th><th>age</th><th>job</th><th>select</th><th>修改</th></tr></table>");
for(var i =0;i<msg.length;i++)
{
$("#member").append("<tr><th>"+msg[i]["id"]+"</th><th>"+msg[i]['mname']+"</th><th>"+msg[i]['age']+"</th><th>"+msg[i]['job']+"</th><th class='btnBox'><button class='dbtn'>delete</button></th><th><button class='change'>修改</button></th></tr>");
}
},
error:function()//如果接收不成功执行以下
{
console.log("链接错误")
}
});
}
function insert() {
var mname=$("#mname").val();
var age=$("#age").val();
var job=$("#job").val();
$.ajax({
type: "post",//传递方法
url: "myInsert.php",//数据接口
data:{mname:mname,age:age,job:job},
success: function(msg)//如果接收成功执行以下
{
refreash();
},
error:function()//如果接收不成功执行以下
{
console.log("链接错误");
}
});
return false;
}
function myQuery() {
var mname=$("#qmname").val();
var age=$("#qage").val();
var job=$("#qjob").val();
$.ajax({
type: "post",//传递方法
url: "myQuery.php",//数据接口
data:{mname:mname,age:age,job:job},
dataType:"json",
success:function (msg) {
$('table').remove();
$("body").append("<table id='member'><tr><th>id</th><th>name</th><th>age</th><th>job</th><th>select</th><th>修改</th></tr></table>");
for(var i =0;i<msg.length;i++)
{
$("#member").append("<tr><th>"+msg[i]["id"]+"</th><th>"+msg[i]['mname']+"</th><th>"+msg[i]['age']+"</th><th>"+msg[i]['job']+"</th><th class='btnBox'><button class='dbtn'>delete</button></th><th><button class='change'>修改</button></th></tr>");
}
if (msg.length==0){
$('table').remove();
$('body').append('<p>无此结果</p>');
}
},error:function () {
console.log("查询错误");
}
});
}
function myChange(cmname,cage,cjob) {
$(document).on('click','#cbtn',function () {
$.ajax({
type:'post',
url:'myChange.php',
data:{mname:cmname,age:cage,job:cjob},
success:function () {
refreash();
},error:function () {
console.log("修改失败");
}
})
});
}
function myDelete(id) {
var choosen=$(id).text();
$.ajax({
type:"post",
url:"myDelete.php",
data:{id:choosen},
success:function (msg) {
refreash();
},
error:function () {
console.log("删除错误");
}
});
}
$(function(){
refreash();
$("#btn").click(function () {
insert();
});
$("#qbtn").click(function () {
myQuery();
});
$(document).on('click','.dbtn',function () {
var id=$(this).parent().parent().children('th')[0];
myDelete(id);
});
$(document).on('click','.change',function () {
var id=$(this).parent().parent().children('th')[0];
// var cmname=$(this).parent().parent().children('th')[1].textContent;
$("#cmname").val($(this).parent().parent().children('th')[1].textContent);
$("#cage").val($(this).parent().parent().children('th')[2].textContent);
$("#cjob").val($(this).parent().parent().children('th')[3].textContent);
$('#cbtn').click(function () {
var mname=$("#cmname").val();
var age=$("#cage").val();
var job=$("#cjob").val();
myChange(mname,age,job);
});
});
});
</script>
</body>
</html>php部分
Connect.php
链接数据库的公用文件<?php
header("Content-Type:text/html;charset=utf8");//申明编码格式
$user = new mysqli();
//Connect to mysql
$user->connect("localhost", "root", "root", "kanjani");
?>phpToAjax.php
基本上是作刷新用<?php
require_once("Connect.php");//导入公用文件
$query = 'SELECT * FROM member';
//Use a variable to save result
$result = $user->query($query);
$jsonArray=array();//新建数据用于接收数据库每行对应的数据组
while($rows=$result->fetch_assoc())
{
//把数据库的内容添加到新建数组中
array_push($jsonArray,$rows);//注意这里是$rows
}
echo json_encode($jsonArray);//转换成json传递
9058
给前端
$user->close();
?>myInsert.php
插入，这一说一个有趣的发现人，phpstrom创建叫“insert.php”的php文件时，会没法自动联想。<?php
/**
* Created by PhpStorm.
* User: akong
* Date: 2017/10/17
* Time: 下午8:36
*/
require_once("Connect.php");//导入公用文件
//$name->mname=$_POST['mname'];
//$age->age=$_POST['age'];
//$job->job=$_POST['job'];
$name=$_POST['mname'];
$age=$_POST['age'];
$job=$_POST['job'];
$query = 'insert into member (mname,age,job) VALUES (\''.$name.'\','.$age.',\''.$job.'\')';
$row=$user->query($query)->fetch_assoc();
//echo json_decode($row);
$user->close();
?>myDelete.php
删除<?php
/**
* Created by PhpStorm.
* User: akong
* Date: 2017/10/18
* Time: 下午5:22
*/
require_once ("Connect.php");
$myId=$_POST['id'];
$query="delete from member where id=".$myId;
$user->query($query);
$user->close();
?>myChange.php
<?php
/**
* Created by PhpStorm.
* User: akong
* Date: 2017/10/18
* Time: 下午10:41
*/
require_once ("Connect.php");
$mname=$_POST['mname'];
$age=$_POST['age'];
$job=$_POST['job'];
$query='update member set mname = \''.$mname.'\',age = '.$age.',job=\''.$job.'\' where mname=\''.$mname.'\'';
$user->query($query);
$user->close();
?>myQuery.php
查询，还是多条件查询哦（有什么了不起的。。。<?php
/**
* Created by PhpStorm.
* User: akong
* Date: 2017/10/18
* Time: 下午5:49
*/
require_once ("Connect.php");
$name=$_POST['mname'];
$age=$_POST['age'];
$job=$_POST['job'];
$query="select * from member where 1=1 ";
if ($name!="")
{
$query.=' and mname=\''.$name.' \' ';
}if ($age!="")
{
$query.= 'and age = ' .$age;
}if ($job!="")
{
$query.=' and job =\''.$job.'\'';
}
$result = $user->query($query);
$jsonArray=array();//新建数据用于接收数据库每行对应的数据组
while($rows=$result->fetch_assoc())
{
//把数据库的内容添加到新建数组中
array_push($jsonArray,$rows);//注意这里是$rows
}
echo json_encode($jsonArray);//转换成json传递给前端
$user->close();
?>刚开始学习php，做了这个数据库增删改查来练习，应该有很多可以改进的地方，请尽管提意见，有不懂的地方也可以说。
csdn的markdown编辑器没法用，放了代码块就会闪退，用的sublime写的。
写博客好累。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap+jq+jqajax+php+数据库增删改查源码(简化版)
- Bootstrap+jq+jqajax+php+数据库增删改查源码(跳转页面版)
- Bootstrap+jq+jqajax+php+数据库增删改查源码
- php和ajax连接数据库实现动态数据可视化
- 【php】配合Ajax与Json，根据MVC思想，无插件，完美兼容IE6，编写一个获取动态系统
- php+ajax实时刷新数据库信息遇到的缓存问题
- json+ajax实现实时刷新和增删查功能
- [Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
- 动态增删输入框和下拉列表框源代码------下拉列表值从数据库取得（Ajax）
- easyui-combobox---ajax获取数据库JSON数据，实现搜索框实时显示模糊搜索结果
- [Echarts可视化] php和ajax连接数据库实现动态数据可视化
- Ajax获取php返回json数据动态生成select下拉框
- php+ajax+jq实现在线人数实时显示
- Ajax获取php返回json数据动态生成select下拉框的实例
- JS通过ajax方式从数据库动态获取数据的代码
- [原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（二）
- php动态修改数据库信息
- ajax请求后台得到json数据后动态生成树形下拉框的方法
- java实现的highcharts与ajax结合动态实时获取数据更新图表
- php+ajax实时输入自动搜索匹配的方法