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

简介

本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。

实现

布局

布局采用前端框架Bootstrap实现响应式布局，快速、高效。
注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需要引入必须的文件才能实现。并且引入文件需要注意顺序。

<link rel="stylesheet" href="libs/bootstrap.css">
<script src="libs/jquery-2.2.4.js"></script>
<script src="libs/popper.js"></script>
<script src="libs/bootstrap.js"></script>

Bootstrap布局代码

<style>
        th{text-align: center !important;}           //让表格的标题文字居中
</style>
    
<div class="container">                         //Bootstrap代码都放在container类中
        <div class="row align-items-center">
            <div class="col-2 h1">LOGO</div>
            <div class="col-3 h4">学生成绩管理系统</div>
            <button type="button" class="btn btn-primary col-1" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" id="insert">添加信息</button>
        </div>
        <div class="row my-5">
            <table class="col-md-12  table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                //这是后面动态生成的记录的样式
                    <!--<tr class="text-center">-->
                        <!--<td>7</td>-->
                        <!--<td>耿龙</td>-->
                        <!--<td>男</td>-->
                        <!--<td>0</td>-->
                        <!--<td>100.00</td>-->
                        <!--<td>100.00</td>-->
                        <!--<td>100.00</td>-->
                        <!--<td>-->
                            <!--<button class="btn btn-info">删除</button>-->
                            <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">修改</button>-->
                        <!--</td>-->
                    <!--</tr>-->
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-md-12">
                <nav aria-label="Page navigation example" class="w-100">
                    <ul class="pagination">
                    //分页
                        <li class="page-item disabled">
                            <a href="#" class="page-link" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a href="#" aria-label="Next" class="page-link">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!--模态框-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">请输入信息：</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="name" class="control-label">姓名:</label>
                            <input type="text" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label for="sex" class="control-label">性别:</label>
                            <input class="form-control" id="sex">
                        </div>
                        <div class="form-group">
                            <label for="age" class="control-label">性别:</label>
                            <input class="form-control" id=age">
                        </div>
                        <div class="form-group">
                            <label for="chinese" class="control-label">语文:</label>
                            <input class="form-control" id="chinese">
                        </div>
                        <div class="form-group">
                            <label for="math" class="control-label">数学:</label>
                            <input class="form-control" id="math">
                        </div>
                        <div class="form-group">
                            <label for="English" class="control-label">英语:</label>
                            <input class="form-control" id="English">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="send">提交</button>
                </div>
            </div>
        </div>
    </div>
</body>

页面初始效果如下：

MySQL数据库

创建一个数据库test1908，在该数据库下创建一个数据表，并默认先添加一条记录，该记录在页面刚开始刷新时，显示在页面上，可以通过对页面的操作，添加、修改、删除记录，实现页面与数据库的同步更新。
在数据库test1908下创建了一个数据表result，并添加了一条记录如下：

实现

实现增删改查功能。具体实现如下：

查询功能

在第一次刷新页面时，会将数据表中的记录显示在页面上，所以首先要进行查询数据表中记录的操作，然后通过Ajax实现页面的无刷新操作数据。

因为要通过Ajax实现页面的无刷新加载数据，所以需要使用Ajax技术，因此将需要引入封装好的Ajax文件，具体代码如下：

function ajax(options){
    // 1.处理默认参数
    var {type,url,success,error,data,timeout} = options;
    type = type || "get";
    data = data || {};
    timeout = timeout || 2000;

    // 2.解析要发送的数据
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }

	// 3.根据方式，决定是否处理url
    if(type == "get"){
        var d = new Date();
        url = url + "?" + str + "__qft=" + d.getTime();
    }

    // 4.开启ajax
    var xhr = new XMLHttpRequest();
    // 注意：open中的方式
    xhr.open(type,url,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            // 5.执行成功之前，先判断是否传入
            success && success(xhr.responseText);
            // 成功之后，不应有失败
            error = null;
        }else if(xhr.readyState == 4 && xhr.status != 200){
            // 6.执行失败之前，先判断是否传入
            error && error(xhr.status);
            // 失败之后，不应有成功
            success = null;
            // 且失败不应多次执行
            error = null;
        }
    }

    // 7.如果请求超时，执行失败
    setTimeout(() => {
        error && error("timeout");
        // 失败之后，不应有成功
        success = null;
    }, timeout);

    // 8.最后根据type的方式，决定send的发送内容和格式
    if(type == "post"){
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(str)
    }else{
        xhr.send()
    }
}

**查询功能：**将代码写在;(function(){})();中，是一种防止在以后做功能项目的时候，防止出现全局变量污染的一种重要手段。在实现数据的增删改查之前，需要首先获取要操作的元素及需要操作的文件。

;(function () {
    //开启严格模式
    "use strict";
    class Project{
        constructor(){
            this.tbody=document.querySelector("tbody");
            //获取插入按钮
            this.insertBtn=document.getElementById("insert");
            //获取提交按钮
            this.send=document.getElementById("send");
            this.name=document.getElementById("name");
            this.sex=document.getElementById("sex");
            this.age=document.getElementById("age");
            this.chinese=document.getElementById("chinese");
            this.math=document.getElementById("math");
            this.English=document.getElementById("English");

            // I2.U2.决定模态框点击事件，执行添加还是修改；0为添加，1为修改
            this.flag=0;
            //用来查询的php文件地址
            this.selectUrl="http://localhost/1908/ajax-project/data/select.php";
            //用来插入数据的PHP文件地址
            this.insertUrl="http://localhost/1908/ajax-project/data/insert.php";
            //用来修改数据的PHP文件地址
            this.updateUrl="http://localhost/1908/ajax-project/data/insert.php";
            //用来删除数据的PHP文件地址
            this.deleteUrl="http://localhost/1908/ajax-project/data/delete.php";
            //S1.立即开启ajax，准备请求最新数据
            this.selectLoad();

            //I1.U1.绑定添加和修改的初始事件，为了在模态框的提交中，判断功能
            this.addEvent();
        }

在该查询方法中，通过PHP从数据表中获取数据，并通过Ajax将数据返回给前端，呈现在页面上。

//查询
        selectLoad(){
            var that=this;
            ajax({
                url:this.selectUrl,
                success:function(res){
                    //console.log(res);
                    //S2. 请求成功之后，准备解析数据，判断成功或失败
                    that.res=JSON.parse(res);
                    // S3 根据成功或失败，决定提示信息或渲染页面
                    if(that.res.code){
                        alert("读取初始数据失败，请重新刷新浏览器");
                    }else{
                     //S4.渲染页面
                     that.display();
                    }
                }
            })
        }

select.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));
    }

    // 准备mysql命令
    $str = "SELECT * FROM result";
    // 发送mysql命令
    $res = $link->query($str);

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

实现效果如下：

添加记录

通过单击添加信息按钮，弹出一个模态框，输入信息之后点击提交按钮，即可添加一条数据，并将该数据保存到数据库中。
因为通过单击添加信息按钮和CHANGE按钮都会弹出模态框，都有一个提交按钮，所有首先需要判断点击的提交按钮之后到底是要添加数据还是修改数据，所有通过addEvent方法进行判断当前要执行的功能状态，0为添加，1为修改。

 addEvent(){
            var that=this;
            //I3.U3 给添加按钮绑定事件，改变对应状态
            this.insertBtn.addEventListener("click", function () {
                that.flag=0;
            });
            //I4.U4 给修改按钮绑定事件，改变对应状态
            this.tbody.addEventListener("click", function (event) {
                var e=event || window.event;
                var target=e.target || e.srcElement;
                if(target.getAttribute("hf") === "update"){
                    that.flag=1;
                }
            });
            //I5.U5 在点击模态框的提交按钮时，判断当前要执行的功能状态，0为添加，1为修改
            this.send.addEventListener("click", function () {
                //I6.U6 点击send时获取输入框的内容，准备发给ajax
                that.n=that.name.value;
                that.s=that.sex.value;
                that.a=that.age.value;
                that.c=that.chinese.value;
                that.m=that.math.value;
                that.e=that.English.value;

                if(that.flag==0){
                    //console.log("添加");
                    //添加一条数据之后，让文本框中的内容清空，以方便下次重新添加输入
                    that.name.value=that.sex.value=that.chinese.value=that.math.value=that.English.value="";
                    //I7 准备开启添加功能的ajax，并发送输入的数据
                    that.insertLoad();
                }else{
                    //console.log("修改");
                    //that.updateLoad();
                }
            });
            this.tbody.addEventListener("click", function (event) {
                var e1=event || window.event;
                var target1=e1.target || e1.srcElement;
                if(target1.getAttribute("del")==="delete"){
                    //获取点击的删除按钮的索引，由此可以得到该删除按钮所在的记录的id
                    that.index=target1.getAttribute("index");
                    that.deleteLoad();
                }
            })
        }
        
  //插入
        insertLoad(){
            var that=this;
            ajax({
                url:this.insertUrl,
                data:{
                    n:this.n,
                    s:this.s,
                    a:this.a,
                    c:this.c,
                    m:this.m,
                    e:this.e
                },
                success: function (res) {
                    //console.log(res);
                    //I8.请求成功之后，解析数据
                    that.res=JSON.parse(res);
                    //I9.根据成功或失败，决定提示信息或渲染页面
                    if(that.res.code){
                        alert(that.res.msg)
                    }else{
                        //I10.渲染页面
                        that.display();
                    }
                }
            })
        }

insert.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"];

    // 准备添加数据的mysql命令
    $str = "INSERT result (name,sex,age,chinese,math,English) VALUES('".$n."','".$s."',".$a.,".$c.",".$m.",".$e.")";

    // 发送添加数据的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);
        }
    }
?>

实现效果如下：