错题集-index.js

    class Project{
    constructor(){
        this.btn = document.getElementById("btn");
        this.title = document.getElementById("title");
        this.content = document.getElementById("content");
        this.message = document.getElementById("message");
        this.tbody = document.querySelector("tbody");

        添加按钮

        this.insertBtn = document.getElementById("insert");

        添加信息的url

        this.insertUrl = "http://localhost/1903/ajax-project/ctrl/insert.php";
        this.updateUrl = "http://localhost/1903/ajax-project/ctrl/update.php";
        this.selectUrl = "http://localhost/1903/ajax-project/ctrl/select.php";

        U1.假设初始提交状态为：添加0；还可以改成：修改1

        this.type = 0;

        I1.绑定提交事件

        this.addEvent()

        S1.开启select的ajax
        this.selectAjax();
    }

    addEvent(){
        var that = this;
        this.btn.onclick = function(){

            I2.U5.获取输入框的数据

            that.t = that.title.value;
            that.c = that.content.value;
            that.m = that.message.value;

            提交之后，清空输入框

            that.title.value = "";
            that.content.value = "";
            that.message.value = "";

            U4.表单提交按钮判断当前的状态，根据状态决定要做的事情

            if(that.type == 0){
                console.log("insert")
                I3.开启insert的ajax
                that.insertAjax();
            }else{
                console.log("update")
                U6.开启update的ajax
                that.updateAjax();
            }
        }

        U2.绑定添加按钮的点击事件，点击时修改状态为0表示添加

        this.insertBtn.onclick = function(){
            that.type = 0;
        }

        U3.绑定修改按钮的点击事件，点击时修改状态为1表示修改，同时设置表单内容和获取id（页面初始没有修改标签，所以用事件委托，委托给现有父级，target为点击的标签）

        this.tbody.addEventListener("click",function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            if(target.id == "update"){
                that.type = 1;
                that.title.value = target.parentNode.parentNode.children[1].innerHTML;

                that.title是当前页面中的内容，有内容，点击添加出来的模态框中没有内容

                that.content.value = target.parentNode.parentNode.children[2].innerHTML;
                that.message.value = target.parentNode.parentNode.children[3].innerHTML;

                要获取当前数据的id，告诉后台修改了哪一条

                that.id = target.parentNode.parentNode.children[0].innerHTML;
            }
        })


    }
    insertAjax(){
        var that = this;
        ajax({
            url:this.insertUrl,
            data:{
                aa:this.t,
                bb:this.c,
                cc:this.m
            },
            success:function(res){

                I4.读取数据，判断数据，解析数据

                switch(res){
                    case "0":
                        break;
                    case "1":
                        break;
                    case "2":
                        break;
                    case "3":
                        break;
                    case "4":
                        break;
                    default:
                        that.res = JSON.parse(res)

                        I5.渲染页面

                        that.display()
                }
            }
        })
    }
    display(){
        console.log(this.res)

        开始渲染页面

        var str = "";
        for(var i=0;i<this.res.length;i++){
            str += `<tr>
                        <td>${this.res[i].id}</td>
                        <td>${this.res[i].bt}</td>
                        <td>${this.res[i].cont}</td>
                        <td>${this.res[i].msg}</td>
                        <td><span class="btn btn-secondary" id="delete">删除</span></td>
                        <td><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" id="update">修改</button></td>
                    </tr>`
        }
        this.tbody.innerHTML = str;
    }
    updateAjax(){

        开启update的ajax

        var that = this;
        ajax({
            url:this.updateUrl,

            发送最新数组并返回

            data:{
                aa:this.t,
                bb:this.c,
                cc:this.m,
                id:this.id
            },
            success:function(res){

                U7.读取数据，判断数据，解析数据

                console.log(res)
                switch(res){
                    case "0":
                        break;
                    case "1":
                        break;
                    case "2":
                        break;
                    case "3":
                        break;
                    case "4":
                        break;
                    default:

                    // that.res = JSON.parse(res)
                    // 另外一种方法
                    // that.display()

                    case "6":
                        没有返回数据，就用在模态框中的数据加进去即把this.t插入到对应的内容，搜索所有的td或者tr找到对应的id，that.tbody.children是tr，tr里面的td有可能就是id
                        U8.更新成功，根据id判断当前修改的是哪个tr，然后通过本地数据更新页面，而不重新请求mysql，节省性能
                        for(var i=0;i<that.tbody.children.length;i++){
                            if(that.tbody.children[i].children[0].innerHTML == that.id){
                                that.tbody.children[i].children[1].innerHTML = that.t
                                that.tbody.children[i].children[2].innerHTML = that.c
                                that.tbody.children[i].children[3].innerHTML = that.m
                            }
                        }
                }
            }
        })
    }

    selectAjax(){
        开启select的ajax
        var that = this;
        ajax({
            url:this.selectUrl,
            success:function(res){
                S2.读取数据，判断数据，解析数据
                console.log(res)
                switch(res){
                    case "0":
                        break;
                    case "1":
                        break;
                    case "2":
                        break;
                    case "3":
                        break;
                    case "4":
                        break;
                    default:
                        that.res = JSON.parse(res)
                        S3.渲染页面
                        that.display()
                }
            }
        })
    }
}

new Project;