利用ajax获取数据对学生表进行简单的增删改查

前言 本次练习没有使用前端框架，默认以表格方式拼接渲染数据，后端数据返回没有采用规范的数据形式返回
默认你能用springboot-mybatis从后端获取到数据
spring boot 静态资源处理

在application.prepeties加上

spring .mvc.static-path-pattern=/static/**

增加学生记录

• 利用jquery获取用户输入学生的信息

    let studentNo = $("#studentNo").val()
    let name = $("#studentName").val()
    let age = parseInt($("#studentAge").val())
    let sex = $("#studentSex").find("option:selected").val()
    let data = {"studentNo":studentNo,"name":name,"age":age,"sex":sex}

• 利用ajax传递新增学生信息给后端,后端返回结果为受影响的行数

$.ajax({
            url: '/student/add',
            type: 'POST',
            dataType: 'json',
            data:data
        })
            .done(function (dat) {
                console.log(dat)
                if ( dat === 1 ) {
                    alert('添加成功');
                    location.reload();
                }
            })
            .fail(function () {
                alert('服务器超时，请重试！');
            });

删除学生记录

• 获取当前行学生记录的学号

// 由于数据的拼接形成的表格，故获取学号则采用获取当前行表格的第几列数据

// 获取删除按钮的父节点父节点，即tr标签
let tr1 = obj.parentNode.parentNode 
// 获取tr
let id = tr1.cells[0].innerText

• 传递学号到后端进行删除操作，返回受影响的行数

$.ajax({
            url: '/student/delete',
            type: 'DELETE',
            dataType:'json',
            data:{"id":id}
        })
            .done(function (dat) {
                console.log(dat)
                alert("删除成功！")
                location.reload();
            })
            .fail(function () {
                alert('服务器超时，请重试！');
            });

更新学生记录

• 对于待更新学生记录，采用获取当前行数据的方式对待更新框进行赋值

var tr1 = obj.parentNode.parentNode
    $("#studentNoU").attr("value",tr1.cells[0].innerText)
    $("#studentNameU").attr("value",tr1.cells[1].innerText)
    $("#studentAgeU").attr("value",tr1.cells[2].innerText)
    document.getElementById("studentSexU").value= tr1.cells[3].innerText;

//对于学号 采用可读不可编辑方式 在id = "studentNo"标签那添加如下属性
readonly="true"

• 获取更新框的数据

let studentNo = $("#studentNoU").val()
    let name = $("#studentNameU").val()
    let age = parseInt($("#studentAgeU").val())
    let sex = $("#studentSexU").find("option:selected").val()
    let data = {"studentNo":studentNo,"name":name,"age":age,"sex":sex}

• 传递更新的数据到后端进行更新操作，返回受影响的行数

$.ajax({
            url: '/student/update',
            type: 'PUT',
            dataType: 'json',
            data:data
        })
            .done(function (dat) {
                console.log(dat)
                if ( dat === 1 ) {
                    alert('更新成功');
                    location.reload();
                }
            })
            .fail(function () {
                alert('服务器超时，请重试！');
            });

查询学生表

• 获取后端数据，使用ajax

$.ajax({
    url: '/student/getAll',
    type: 'GET',
    dataType: 'json'
})
    .done(function (dat) {
        data = dat
        showData(data)
    })
    .fail(function () {
        alert('服务器超时，请重试！');
    });

• 渲染数据到表格采用循环数据拼接表格的方式

function showData(data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {
        str = "<tr><td>" + data[i].studentNo + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td><td>" + data[i].sex+ "</td>"
            +'<td>&nbsp;&nbsp;<button  type="button"  οnclick="deleteStudent(this)" >删除</button >&nbsp;&nbsp;<button  type="button"  οnclick="updateStudent(this)" >更新</button ></td>'
            +"</tr>";
        $("#container").append(str);
    }
}

• 后端数据返回如同以下格式

[
            {
                "studentNo": "s001",
                "name": "张三",
                "age": 23,
                "sex": "男"
            },
            {
                "studentNo": "s002",
                "name": "李四",
                "age": 23,
                "sex": "男"
            }
]