PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（中）

在上个文章中介绍了如何使用bootstrap进行布局，使用PHP操作数据库，通过ajax实现数据的查询和添加功能，在这篇文章中，继续实现ajax交互项目的修改和删除操作。

修改功能

思路

通过点击页面上的修改按钮，将会弹出模态框，并将这一行的信息对应显示在模态框的文本框中，修改其中的数据，并点击提交，即可修改数据，并同步到数据库中。所以，在点击提交按钮之前,在点击修改按钮的时候就必须要获取点击当前按钮这一行中的所有数据，并保存在模态框的对应文本框中。

修改功能的js代码

//利用时间委托的方式绑定到要点击的修改按钮
this.tbody.addEventListener("click", function (event) {
    var e=event || window.event;
     var target=e.target || e.srcElement;
     if(target.getAttribute("hf") === "update"){
     //flag用来表示状态，判断点击的提交按钮是在插入还是在修改时点击的，0表示插入，1表示修改
         that.flag=1;
         //在点击提交按钮之前获取这一行的数据
         // 获取点击信息的id，准备发给ajax
         that.id=target.parentNode.parentNode.children[0].innerHTML;
         // 获取点击信息的内容，设置到模态框中的输入框，准备修改
         that.name.value=target.parentNode.parentNode.children[1].innerHTML;
         that.sex.value=target.parentNode.parentNode.children[2].innerHTML;
         that.age.value=target.parentNode.parentNode.children[3].innerHTML;
         that.chinese.value=target.parentNode.parentNode.children[4].innerHTML;
         that.math.value=target.parentNode.parentNode.children[5].innerHTML;
         that.English.value=target.parentNode.parentNode.children[6].innerHTML;
     }
 });

//用来删除数据的PHP文件地址
      this.deleteUrl="http://localhost/1908/ajax-project/data/update.php";
//修改
        updateLoad(){
            var that=this;
            ajax({
                url:this.updateUrl,
                data:{
                    id:this.id,
                    n:this.n,
                    s:this.s,
                    a:this.a,
                    c:this.c,
                    m:this.m,
                    e:this.e
                },
                success: function (res) {
                    //console.log(res);
                    that.res=JSON.parse(res);
                    if(that.res.code){
                        alert(that.res.msg)
                    }else{
                        //I10.渲染页面
                        that.display();
                    }
                }
            });
        }

修改功能的PHP代码

<?php
    // 连接mysql
    $link = @new mysqli("localhost:3306","root","root","test1908");
    // 准备报错
    if($link->connect_error){
        // 报错以json的形式呈现
        $err = array("code"=>1,"msg"=>$link->connect_error);
        die(json_encode($err));
    }

    // 接收前端发送的数据
    $n = @$_REQUEST["n"];
    $s = @$_REQUEST["s"];
    $a = @$_REQUEST["a"];
    $c = @$_REQUEST["c"];
    $m = @$_REQUEST["m"];
    $e = @$_REQUEST["e"];

    // 接收前端发送的id
    $id = @$_REQUEST["id"];

    // 准备修改数据的mysql命令
    $str = "UPDATE result SET name='".$n."',sex='".$s."',age=".$a.",chinese=".$c.",math=".$m.",English=".$e." WHERE Id=".$id;


    // 发送修改数据的mysql命令
    $q = $link->query($str);
    if($q){
        // 修改成功，重新查询最新数据，并返回
        echo select();
    }else{
        // 修改失败，准备报错
        $err = array("code"=>3,"msg"=>"修改数据失败");
        echo json_encode($err);
    }
    // 查询最新数据的功能
    function select(){
        global $link;
        // 准备mysql命令
        $str = "SELECT * FROM result";
        // 发送mysql命令
        $res = $link->query($str);

        // 判断mysql的返回结果
        if($res){
            // 准备解析并拼接数据
            $str = "";
            while($arr = $res->fetch_assoc()){
                $str = $str . json_encode($arr) . ",";
            }
            // 将处理好的数据，给前端返回
            return "[".substr($str,0,-1)."]";
        }else{
            // 如果请求失败，准备以json形式给前端报错信息
            $err = array("code"=>2,"msg"=>"获取数据失败");
            return json_encode($err);
        }
    }
?>

实现效果

修改之前


修改之后

删除功能

思路

在实现删除功能时，首先需要判断点击的是哪一行数据的删除按钮,同时

实现删除功能的js代码

//用来删除数据的PHP文件地址
     this.deleteUrl="http://localhost/1908/ajax-project/data/delete.php";
//删除
        deleteLoad(){
            var that=this;
            ajax({
                url:this.deleteUrl,
                //将要删除的这条记录的id传过去
                data:{
                    id:this.index
                },
                success: function (res) {
                    //console.log(res);
                    that.res=JSON.parse(res);
                    //console.log(that.res)
                    if(that.res.code){
                        alert(that.res.msg);
                    }else{
                        that.display();
                    }
                }
            })
        }

实现删除功能的PHP代码

<?php
    // 连接mysql
    $link = @new mysqli("localhost:3306","root","root","test1908");
    // 准备报错
    if($link->connect_error){
        // 报错以json的形式呈现
        $err = array("code"=>1,"msg"=>$link->connect_error);
        die(json_encode($err));
    }

    // 接收前端发送的id
    $id = @$_REQUEST["id"];
    // 准备删除数据的mysql命令，通过找到点击的删除按钮的id将对应id的这条记录删除
         $str = "DELETE FROM result WHERE Id='{$id}'";
    // 发送删除数据的mysql命令
    $q = $link->query($str);
    if($q){
        // 删除成功，重新查询最新数据，并返回
        echo select();
    }else{
        // 删除失败，准备报错
        $err = array("code"=>3,"msg"=>"删除数据失败");
        echo json_encode($err);
    }
    // 查询最新数据的功能
    function select(){
        global $link;
        // 准备mysql命令
        $str = "SELECT * FROM result";
        // 发送mysql命令
        $res = $link->query($str);

        // 判断mysql的返回结果
        if($res){
            // 准备解析并拼接数据
            $str = "";
            while($arr = $res->fetch_assoc()){
                $str = $str . json_encode($arr) . ",";
            }
            // 将处理好的数据，给前端返回
            return "[".substr($str,0,-1)."]";
        }else{
            // 如果请求失败，准备以json形式给前端报错信息
            $err = array("code"=>2,"msg"=>"获取数据失败");
            return json_encode($err);
        }
    }
?>

实现效果