PHP+JQ+AJAX+json 数据库实时动态增删改查

最新推荐文章于 2022-07-12 22:54:44 发布
最新推荐文章于 2022-07-12 22:54:44 发布
阅读量7.1k 收藏 32
点赞数 7
分类专栏： php 文章标签： ajax php json jquery 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36894103/article/details/78298086
版权

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传递给前端
$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写的。
写博客好累。

阿空阿空
关注
  • 7
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
PHP Ajax实现表格实时编辑
10-19
本篇文章主要介绍了Ajax实现表格实时编辑的方法，具有很好的参考价值。下面跟着小编一起来看下吧
ssm框架简单整合增删改查+jq,ajax下拉框+二级省市联动
05-18
纯净SSM简单整合，数据库资源根据实体类自己创建。内有ssm增删改查，ajax结合jquery做下拉框，省市联动，多选框等。所有jar包都放在lib里，搭好数据库完美可用。供新手学习。
一个页面实现Ajax效果的增删改查-JQuery+Json版
08-25
一个页面实现Ajax效果的增删改查-JQuery+Json版包含数据库
jsp中利用jquery+ajax在前后台之间传递json格式参数
10-26
前后台之间的参数传递一直是个问题，经过一段时间的实验琢磨，终于搞定，先把经验拿出来与大家分享，希望可以让新手朋友们少走弯路
关于jq实现购物车增删改查及金额结算的案例源码
11-06
关于jq实现购物车增删改查及金额结算的案例源码，里面比较全的一套代码用jq写的，有具体的解析跟步骤，
【前端】用JQuery、AJAX将Table的数据以JSON数组的形式传输给后端
Mister_Yu的博客
04-28 1066
用JQuery、AJAX将Table的数据以JSON数组的形式传输给后端 function approveAll(){ //先创建一个Array数组 var stations = new Array(); //table为表格的ID var tb = document.getElementById('table'); //获得所有行（是一个数组） var rows = tb.row...
php+json+ajax+jquery小例子
成长日记的博客
07-04 1251
使用Jquery中的ajax方法传递JSON数据包，传递的方法使用POST。 初次接触，例子比较简单。 写了两个文件：test.html、test.php test.html:  $("#send").click(function(){               var con = $("input").serialize();              $.ajax({
PHP+AJAX 实现表格实时编辑
Jason World
08-02 3171
AJAX用用场景 异步搜索过滤内容数据（关键字搜索） 表单异步验证(表单提交验证) 异步加载内容数据(更多内容) 数据逻辑处理 AJAX特点 在不刷新当前页面的前提下，与服务器进行异步交互 优化了浏览器和服务器之间的数据传输、减少了不必要的数据往返 把部分数据转移到客户端，减少了服务器的压力 实现AJAX的基本思路 根据需求选择一个javascript类库 javascri...
jquery,php之间的ajax关系以及json
weixin_33905756的博客
06-04 143
1.最简介写法 function AjaxDepotGoods(id){ $.ajax({ url:"{:U('stock/depot_goods')}", success:function(html){ $('#depot_goods').html(html) } }); ...
jquery和ajax的结合制作表格,使用jQuery从AJAX响应构建表行（json）
weixin_29944883的博客
08-05 213
繁花如伊如果我们有这样的JSON数据// JSON Datavar articles = [ { "title":"Title 1", "url":"URL 1", "categories":["jQuery"], "tags":["jquery","json","$.each"] }, { "title":...
jq实现购物车的增删改查及金额结算
11-06
关于jq实现购物车增删改查及金额结算的案例源码，里面比较全的一套代码用jq写的，有具体的解析跟步骤，
ajax json php jquery 实现json数据发送和处理
杨光的技术收集站
08-21 646
HTML页面部分： > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>PHP AJAX JSON测试title> script type="text/javascript" src="jq
JQ发送ajax请求接口，获取整个表单转化为JSON数据
weixin_44936767的博客
01-12 671
前提：解决微信小程序php处理文件和H5请求php处理文件共用（框架使用的是：Layer​​​​​​​） <form action="text.php" method="post" name="fabuadd" id="fabuadd"> <input class="txt" type="text" placeholder="10字以内" placeholder-class="#999999" value="" .
通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）
duke_ding2的博客
07-12 3575
页面上有一个“获取”按钮。当点击按钮时，从后端获取数据，并通过表格显示在页面上。创建SpringBoot项目 ，添加Spring Web依赖。创建Controller ： 注：这里加上了 注解，否则会因为同源策略导致浏览器无法接收数据，详见我另一篇文档。运行程序，测试一下效果： 原生Ajax 创建 文件如下： 注：该页面使用了原生的Ajax，并且没有添加任何css样式。在浏览器中打开页面，点击“获取”按钮，获取数据：按 键，切换到 页签，选中 ，可以看到对应的Ajax请求。使用JQuery，可
springboot update数据_jquery+ajaxform+springboot控件实现数据更新功能
weixin_39582569的博客
12-21 271
应用背景使用springboot架构在如下图所示的界面布局中，实现数据的保存或者更新，务必需要提交到后台，如何进行成功或失败的提示呢？如果使用传统的springmvc的模式，势必要传一个页面给前端，这个页面仅仅是提示操作是否成功了！提示之后还得更新一下数据，就好比我们浏览某些网站的时候给出的一些提示 操作成功，5秒后返回 。比较傻，客户体验也比较差劲。改造历程使用ajax能否解决上述的问题呢？答案...
php datatable ajax,jQuery - 第三方表格插件DataTables使用详解2（Ajax请求数据、服务端分页）...
weixin_35158372的博客
03-13 367
四、Ajax请求数据之：一次性全部获取1，条目为数组的情况(1)假设服务器上数据文件(data.txt)里的数据如下：{"data": [["001","张三","2011-11-23"],["002","李四","2001-11-23"],["003","刘士元","2021-08-21"],["004","赵四","2008-08-08"],["005","赵五","2008-08-08"],...
php表单发送json数据类型,php – 动态地通过ajax和JQuery以json格式发送表单数据
weixin_32905035的博客
03-19 98
是的我可以将所有数据发送到服务器,无论如何它都能正常运行,例：$(function() { // on document load$('#email_form').submit(function() { // set onsubmit event to the formvar data = $('#email_form').serialize(); // serialize all the dat...
ajax jquery json实例,一个php+jquery+json+ajax实例
weixin_34439836的博客
08-06 146
json.php控制台$(document).ready(function(){// $.ajax({// type: "POST",// url: "receiveone.php",// dataType: "json",// data: "id=3",// success: function(data){// for(var p in data){//遍历json对象的每个k...
ajax json jq 表单,jq之ajax以及json数据传递
weixin_36445866的博客
08-05 244
闭包演示function transfer(){var dat = $( "#sel" ).val();//console.log(dat)$.ajax({type:"POST", //post 同 geturl:"ts1.php",data:{data:dat},//console.log(data);success:f...
JQ+AJAX刷新数据库
最新发布
06-01
您可以使用jQuery和AJAX来刷新数据库。以下是一个简单的例子： 1. HTML文件中包含一个按钮，当用户点击按钮时，将触发AJAX请求并刷新数据库。 ``` 刷新数据库 ``` 2. 在JavaScript文件中，使用jQuery的ajax()方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值