运用ajax和伪后台mock对学生信息进行增删改查的操作

实现的功能

• 使用mock随机生成数据
• 实现了学生信息的增删改查

实现功能具体步骤

ajax.js代码

用Promise封装ajax

function ajax(config){
    return new Promise(function(resolve){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                let text = JSON.parse(xhr.responseText);
                // config.success(text);
                resolve(text);
            }
        }
        xhr.open(config.type,config.url,config.async);
        xhr.send(config.data);
    });
    
}

1.生成随机代码

通过点击生成随机数据按钮来由Mock生成的随机数据，然后将随机数据存储在本地浏览器中，然后通过show方法来显示在页面上。

document.getElementById("btn").onclick = function () {
    let obj = Mock.mock({
        'students|10': [{
            'id|+1': 1,
            'name': '@cname',
            'age|20-45': 1,
            'gender': /[男女]/
        }]
    })
    console.log(obj.students);
    //localStorage.getItem('students') || '[]'   :意思是如果本地有数据就获取数据没有数据的话就创建一个空数组来存储数据
    let oldStudents = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(oldStudents);
    //将我获取的本地数据和我创建的随机数据用点运算符生成一个新的数组把他存储在本地
    localStorage.setItem('students', JSON.stringify([...oldStudents, ...obj.students]));
    show();
}

2.显示数据

async function show() {
    //调用ajax
    let res = await ajax({
        type: "post",
        url: "/findStudents"
    });
    //调用封装的函数
    data(res.students);
}

//封装查询的添加数据
        function data(data) {
            let str = "";
            //循环获取的数据来把他添加到表格当中
            for (let i = 0; i < data.length; i++) {
                str += `
                    <tr>
                        <td>${data[i].name}</td> 
                        <td>${data[i].age}</td>   
                        <td>${data[i].gender}</td>
                        <td>
                            <input type="button" value="修改" data-id="${data[i].id}">
                            <input type="button" value="删除" data-id="${data[i].id}">
                        </td>
                    </tr>
                `
            }
            //然后再把它实现在页面上
            tbody.innerHTML = str;
        }

3.增加学生信息

通过输入框输入数据来获取数据传送到后端来进行添加数据，

 //添加学生数据
        document.getElementById("addStudents").onclick = async function () {
            let addGender = document.querySelectorAll("#addGender");
            let gender = "";
            for (let i = 0; i < addGender.length; i++) {
                if (addGender[i].checked) {
                    gender = addGender[i].value;
                }
            }
            console.log(gender);
            //判断添加数据为空时不添加
            if (addUsername.value == "" && addAge.value == "" && gender == "") {
                alert("不能添加为空的信息");
            } else {
                let res = await ajax({
                    type: "post",
                    url: "/addStudents",
                    data: {
                        name: addUsername.value,
                        age: addAge.value,
                        gender: gender
                    }
                })
                alert("增加成功");
                show();
            }

        }

//模拟后台数据，通过获取前端发送的数据来实现步骤，给每条自己添加的数据创建一个id值，之后才好才好查询是哪条数据

//添加学生
Mock.mock('/addStudents', 'post', function (options) {
    //获取的前端数据
    let { name, age, gender } = options.body;
    console.log(options.body, name, age, gender);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    let id = 1;
    //判断studens的长度是否大于0，大于0的话，就把students的最后一个元素的id加1
    if (students.length > 0) {
        id = students[students.length - 1].id + 1;
    }
    students.push({
        name,
        age,
        gender,
        id
    })
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "添加成功"
    };
})

4.需要获取表格里面点击哪个删除或是修改按钮

通过冒泡事件来获取我点击的每一个里面的数据，然后根据判断来获取我需要点击的哪个删除或者修改，target是我点击整个tbody数据来冒泡。获取到点击的是修改或删除之后，但是无法判断我点击的是哪个删除或者是哪个修改，这时候我们就需要创建一个全局变量，来获取你点击修改或删除这条语句的自定义属性id来获取这条语句。

获取到它的id值后，在把id值传入后端.

//deleBtn全局变量获取我点击修改和删除来获取当前学生信息的所有数据（当不使用form表单提交的时候，我们就可以使用表单事件的隐藏属性来获取）
let deleBtn;
//冒泡事件
tbody.onclick = async function (e) {
    deleBtn = e.target.dataset.id;
    if (e.target.value == "删除") {
        if (confirm("是否删除？")) {
            // console.log(e.target.dataset.id);               
            let res = await ajax({
                type: "post",
                url: "/deleteStudents",
                data: {
                    deleBtn
                }
            })
            }
        show();
    }
    if (e.target.value == "修改") {
        let res = await ajax({
            type: "post",
            url: "/reviseStudents",
            data: {
                deleBtn
            }
        })
        //方法二添加上去修改的内容（通过find来找到你点击的那个学生信息），然后这上传修改的地方
        upDataid.value = res.student.id;
        reviseUsername.value = res.student.name;
        reviseAge.value = res.student.age;
        //上传性别的方法一
        // if (res.student.gender == "女") {
        //     sex[1].checked = true;
        // } else {
        //     sex[0].checked = true;
        // }
        console.log("res:", res.student.gender);
        //上传性别的方法二
        document.querySelector(`[name=reviseGender]value=${res.student.gender}]`).checked = true;
    }
}

5.删除学生信息

有两个删除学生的方法，一个是filter方法，一个是循环遍历为空方法。

根据传入某个学生的deleBtn来使用fillter筛选我本地存储的数据里面的id不等于我传入的deleBtn的其他所有学生的数据，然后再把筛选出来的除了我点击删除那个学生的其他所有学生，存储到本地存储里面，然后再重新渲染一次，页面上就只有当前这筛选出来的这几名同学了。

Mock.mock('/deleteStudents', 'post', function (options) {
    console.log(options.body.deleBtn);
    let { deleBtn } = options.body;
    //获取我点击删除按钮的id
    let students = JSON.parse(localStorage.getItem('students') || '[]');   
    students = students.filter(item => item.id != deleBtn);
    console.log(students);
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "删除成功"
    }
})

 // for (let i = 0; i < students.length; i++) {
    //     if (students[i].id == deleBtn) {
    //         students[i] = '';
    //     }
    // }
    // students = students.filter(item => item != '');

6.修改学生信息

修改学生有两个步骤，一个是点击修改那名同学的信息，同学的信息会补充到修改的文本框里面；然后再在文本框里修改学生的信息，然后再点击修改按钮，学生的信息才会被修改成功。

//将修改学生的信息放在文本框里面
Mock.mock("/reviseStudents", 'post', function (options) {
    let { deleBtn } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || "[]");    
    let student = students.find(item => item.id == deleBtn);
    console.log(student);
    return {
        student
        // msg: "修改上传成功"
    }
})

//把修改的学生数据传入新的students
Mock.mock("/reviseStudentsTrue", 'post', function (options) {
    let { name, age, gender, id } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    //可以使用方法一，那边调用就使用返回的student用res.信息就行了
    let student = students.find(item => item.id == id);
    console.log(student);  //可以通过find来查找你点击获取的学生数据，因为find为ture返回当前信息，false返回undefined
    for (let i = 0; i < students.length; i++) {
        //id使用的是全局变量
        if (students[i].id == id) {
            students[i].name = name;
            students[i].age = age;
            students[i].gender = gender;
            console.log(students[i]);
        }
    }
    localStorage.setItem("students", JSON.stringify(students));
    return {
        student
    }
})

7.查询

根据选择通过哪个属性来查找信息来再文本框里面输入你需要查找人的姓名，性别来模糊查找，比如输入张，就会查找出名字里面包含张的所有学生的信息来显示到页面上面。

原理：根据页面传入获取的哪个属性和输入的文本，来传入后端，后端根据筛选是否满足模糊查询的条件来判断是否返回数据，。因为正则要传入参数，所以使用new RegExp(name,"g")来创建正则，第一个参数是匹配原则，第二个是匹配模式，g为全局匹配模式，然后根据match()方法啦判断是否符合条件，符合则返回true给filter然后filter再返回满足条件的数组，然后再渲染给页面。

 screenBtn.onclick = async function () {
            //select有一个属性options是获取下面的所有option，selectedIndex是获取你点击哪个option的下标，text是获取option里面的文本            
            let indexText = screenStudents[screenStudents.options.selectedIndex].value;
            let res = await ajax({
                type: "post",
                url: "/screenStudents",
                data: {
                    indexText,
                    name: screenName.value,
                }
            })
            console.log(res.temp);
            if (res.temp == '') {
                show();
            } else {
                data(res.temp);
            }
        }

Mock.mock("/screenStudents", 'post', function (options) {
    //indexText是获取下拉列表的所有属性，name是我输入我要查找的东西
    let { indexText ,name} = options.body;
    console.log(indexText, options.body,name);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(students);
    //创建模糊查询关键字变量
    let reg = new RegExp(name,"g");
    console.log(reg);
    //temp满足条件的就返回符合条件的所有数组，不满足就返回undefined
    let temp = students.filter(item=>{
        if(indexText=="age"){
            if(item.age==name){
                console.log(item.age);
                return true;
            }
        }else{
            if(item[indexText].match(reg)){
                return true;
            }
        }
    });
   console.log(temp);
    return{
        temp
    }
})

完整代码

mock-min.js

去官网下载：http://mockjs.com/

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax增删改查</title>
    <style>
        table,
        td,
        th {
            /* 设置边框 */
            border: 1px solid;
            /* 边框塌陷 */
            border-collapse: collapse;
            width: 700px;
            height: 25px;
            text-align: center;
        }
    </style>
</head>

<body>
    <form action="">
        <h1>学生管理</h1>
        <h4>增加学生</h4>
        <div>
            <label for="addUsername">姓名：</label>
            <input type="text" name="" id="addUsername">
            <label for="addAge">年龄：</label>
            <input type="text" name="" id="addAge">
            <label for="addGender">性别：</label>
            <input type="radio" name="addGender" id="addGender" value="男"><label for="">男</label>
            <input type="radio" name="addGender" id="addGender" value="女"><label for="">女</label>
            <input type="button" value="增加" id="addStudents">
        </div>
        <h4>修改学生</h4>
        <div>
            <input type="hidden" id="upDataid">
            <label for="reviseUsername">姓名：</label>
            <input type="text" name="" id="reviseUsername">
            <label for="reviseAge">年龄：</label>
            <input type="text" name="" id="reviseAge">
            <label for="reviseGender">性别：</label>
            <input type="radio" name="reviseGender" id="reviseGender" value="男"><label for="">男</label>
            <input type="radio" name="reviseGender" id="reviseGender" value="女"><label for="">女</label>
            <input type="button" value="修改" id="reviseStudents">
        </div>
        <h4>查询信息</h4>
        <div>
            <select name="" id="screenStudents">
                <option value="name">姓名</option>
                <option value="age">年龄</option>
                <option value="gender">性别</option>
            </select>
            <input type="text" id="screenName">
            <input type="button" value="查询" id="screenBtn">
        </div>
        <h4>学生信息</h4>
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <button id="btn">点击随机数据</button>
    </form>

    <script src="./js/mock-min.js"></script>
    <script src="./js/student.js"></script>
    <script src="./ajax.js"></script>
    <script src="./js/studentMock.js"></script>
    <script>
        let tbody = document.getElementById("tbody");
        let upDataid = document.getElementById("upDataid");
        let deleteData = document.querySelectorAll("deleteData");
        let reviseStudents = document.getElementById("reviseStudents");
        //添加
        let addUsername = document.getElementById("addUsername");
        let addAge = document.getElementById("addAge");
        let sex = document.forms[0]['reviseGender'];
        //修改
        let reviseGender = document.querySelectorAll("#reviseGender");
        let reviseUsername = document.getElementById("reviseUsername");
        let reviseAge = document.getElementById("reviseAge");
        //查询
        let screenBtn = document.getElementById("screenBtn");
        let screenName = document.getElementById("screenName");
        let screenStudents = document.getElementById("screenStudents");
        //封装查询的添加数据
        function data(data) {
            let str = "";
            for (let i = 0; i < data.length; i++) {
                str += `
                    <tr>
                        <td>${data[i].name}</td> 
                        <td>${data[i].age}</td>   
                        <td>${data[i].gender}</td>
                        <td>
                            <input type="button" value="修改" data-id="${data[i].id}">
                            <input type="button" value="删除" data-id="${data[i].id}">
                        </td>
                    </tr>
                `
            }
            tbody.innerHTML = str;
        }
        //显示数据
        async function show() {
            let res = await ajax({
                type: "post",
                url: "/findStudents"
            });
            data(res.students);
        }
        show();
        //测试随机获取学生数据
        document.getElementById("btn").onclick = function () {
            let obj = Mock.mock({
                'students|10': [{
                    'id|+1': 1,
                    'name': '@cname',
                    'age|20-45': 1,
                    'gender': /[男女]/
                }]
            })
            console.log(obj.students);
            let oldStudents = JSON.parse(localStorage.getItem('students') || '[]');
            console.log(oldStudents);
            localStorage.setItem('students', JSON.stringify([...oldStudents, ...obj.students]));
            show();
        }
        //添加学生数据
        document.getElementById("addStudents").onclick = async function () {
            let addGender = document.querySelectorAll("#addGender");
            let gender = "";
            for (let i = 0; i < addGender.length; i++) {
                if (addGender[i].checked) {
                    gender = addGender[i].value;
                }
            }
            console.log(gender);
            //判断添加数据为空时不添加
            if (addUsername.value == "" && addAge.value == "" && gender == "") {
                alert("不能添加为空的信息");
            } else {
                let res = await ajax({
                    type: "post",
                    url: "/addStudents",
                    data: {
                        name: addUsername.value,
                        age: addAge.value,
                        gender: gender
                    }
                })
                alert("增加成功");
                show();
            }

        }
        //删除学生数据，修改学生数据
        //deleBtn全局变量获取我点击修改和删除来获取当前学生信息的所有数据（当不使用form表单提交的时候，我们就可以使用表单事件的隐藏属性来获取）
        let deleBtn;
        //冒泡事件
        tbody.onclick = async function (e) {
            deleBtn = e.target.dataset.id;
            if (e.target.value == "删除") {
                if (confirm("是否删除？")) {
                    // console.log(e.target.dataset.id);               
                    let res = await ajax({
                        type: "post",
                        url: "/deleteStudents",
                        data: {
                            deleBtn
                        }
                    })
                }
                show();
            }
            if (e.target.value == "修改") {
                let res = await ajax({
                    type: "post",
                    url: "/reviseStudents",
                    data: {
                        deleBtn
                    }
                })
                //方法二添加上去修改的内容（通过find来找到你点击的那个学生信息），然后这上传修改的地方
                upDataid.value = res.student.id;
                reviseUsername.value = res.student.name;
                reviseAge.value = res.student.age;
                //上传性别的方法一
                // if (res.student.gender == "女") {
                //     sex[1].checked = true;
                // } else {
                //     sex[0].checked = true;
                // }
                console.log("res:", res.student.gender);
                //上传性别的方法二
                document.querySelector(`[name=reviseGender][value=${res.student.gender}]`).checked = true;
            }
        }
        //修改成功学生数据
        reviseStudents.onclick = async function () {
            let gender = "";
            for (let i = 0; i < reviseGender.length; i++) {
                if (reviseGender[i].checked) {
                    gender = reviseGender[i].value;
                }
            }
            let res = await ajax({
                type: "post",
                url: "/reviseStudentsTrue",
                data: {
                    name: reviseUsername.value,
                    age: reviseAge.value,
                    gender: gender,
                    //这就是使用表单的隐藏属性获取点击的id属性（就不是使用全局变量了）
                    id: upDataid.value
                }
            })
            alert("修改成功");
            show();
        }
        //查询学生信息
        screenBtn.onclick = async function () {
            //select有一个属性options是获取下面的所有option，selectedIndex是获取你点击哪个option的下标，text是获取option里面的文本            
            let indexText = screenStudents[screenStudents.options.selectedIndex].value;
            let res = await ajax({
                type: "post",
                url: "/screenStudents",
                data: {
                    indexText,
                    name: screenName.value,
                }
            })
            console.log(res.temp);
            if (res.temp == '') {
                show();
            } else {
                data(res.temp);
            }
        }
    </script>
</body>

</html>

ajax.js

function ajax(config){
    return new Promise(function(resolve){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                let text = JSON.parse(xhr.responseText);
                // config.success(text);
                resolve(text);
            }
        }
        xhr.open(config.type,config.url,config.async);
        xhr.send(config.data);
    });
    
}

studentMock.js

//获取学生信息
Mock.mock('/findStudents', 'post', function (options) {
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    return {
        students
    };

})
//添加学生
Mock.mock('/addStudents', 'post', function (options) {
    let { name, age, gender } = options.body;
    console.log(options.body, name, age, gender);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    let id = 1;
    //判断studens的长度是否大于0，大于0的话，就把students的最后一个元素的id加1
    if (students.length > 0) {
        id = students[students.length - 1].id + 1;
    }
    students.push({
        name,
        age,
        gender,
        id
    })
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "添加成功"
    };
})
//删除学生数据
Mock.mock('/deleteStudents', 'post', function (options) {
    console.log(options.body.deleBtn);
    let { deleBtn } = options.body;
    //获取我点击删除按钮的id
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    // for (let i = 0; i < students.length; i++) {
    //     if (students[i].id == deleBtn) {
    //         students[i] = '';
    //     }
    // }
    // students = students.filter(item => item != '');
    students = students.filter(item => item.id != deleBtn);
    console.log(students);
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "删除成功"
    }
})
//修改学生数据
Mock.mock("/reviseStudents", 'post', function (options) {
    let { deleBtn } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || "[]");
    //方法一添加上去修改的内容
    // let reviseUsername = document.getElementById("reviseUsername");
    // let reviseAge = document.getElementById("reviseAge");
    // let sex = document.forms[0]['reviseGender'];    
    // for (let i = 0; i < students.length; i++) {
    //     //通过获取点击的修改按钮获取的id来得到我选中的这个数组的所有数据
    //     if (students[i].id == deleBtn) {
    //         reviseUsername.value = students[i].name;
    //         reviseAge.value = students[i].age;
    //         if (students[i].gender == "女") {
    //             sex[1].checked = true;
    //         } else {
    //             sex[0].checked = true;
    //         }
    //         console.log(students[i]);
    //     }
    // }
    //方法二添加上去修改的内容（通过find来找到你点击的那个学生信息）
    let student = students.find(item => item.id == deleBtn);
    console.log(student);
    return {
        student
        // msg: "修改上传成功"
    }
})
//把修改的学生数据传入新的students
Mock.mock("/reviseStudentsTrue", 'post', function (options) {
    let { name, age, gender, id } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    //可以使用方法一，那边调用就使用返回的student用res.信息就行了
    let student = students.find(item => item.id == id);
    console.log(student);  //可以通过find来查找你点击获取的学生数据，因为find为ture返回当前信息，false返回undefined
    for (let i = 0; i < students.length; i++) {
        //id使用的是全局变量
        if (students[i].id == id) {
            students[i].name = name;
            students[i].age = age;
            students[i].gender = gender;
            console.log(students[i]);
        }
    }
    localStorage.setItem("students", JSON.stringify(students));
    return {
        student
    }
})

//查询学生信息
Mock.mock("/screenStudents", 'post', function (options) {
    //indexText是获取下拉列表的所有属性，name是我输入我要查找的东西
    let { indexText ,name} = options.body;
    console.log(indexText, options.body,name);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(students);
    //创建模糊查询关键字变量
    let reg = new RegExp(name,"g");
    console.log(reg);
    //temp满足条件的就返回符合条件的所有数组，不满足就返回undefined
    let temp = students.filter(item=>{
        if(indexText=="age"){
            if(item.age==name){
                console.log(item.age);
                return true;
            }
        }else{
            if(item[indexText].match(reg)){
                return true;
            }
        }
    });
   console.log(temp);
    return{
        temp
    }
})

ns) {
//indexText是获取下拉列表的所有属性，name是我输入我要查找的东西
let { indexText ,name} = options.body;
console.log(indexText, options.body,name);
let students = JSON.parse(localStorage.getItem(‘students’) || ‘[]’);
console.log(students);
//创建模糊查询关键字变量
let reg = new RegExp(name,“g”);
console.log(reg);
//temp满足条件的就返回符合条件的所有数组，不满足就返回undefined
let temp = students.filter(item=>{
if(indexText==“age”){
if(item.age==name){
console.log(item.age);
return true;
}
}else{
if(item[indexText].match(reg)){
return true;
}
}
});
console.log(temp);
return{
temp
}
})