常用代码-接口交互+构建页面

点击#search，无参请求，构造表格

代码：

    function getDataSet() {
        $("body").on("click", "#search", function () {
            $.ajax({
                type: "get",
                url: "http://114.67.241.121:8080/product/list",
                complete: function (data) {
                    let dataSet = data.responseJSON.data;
                    $("#product").empty();
                    $("#product").append(buildTableContent(dataSet));
                },
            });
        });
    }

    function buildTableContent(dataSet) {
        let tableContent = "<table><tr><th></th><th>品牌</th><th>型号</th><th>价格</th></tr>";
        for (let i = 0; i < dataSet.length; i++) {
            tableContent += "<tr>";
            tableContent += "<td>" + "<img src='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + "</td>";
            tableContent += "<td>" + dataSet[i].brand + "</td>";
            tableContent += "<td>" + "<a target='_blank' href='http://114.67.241.121:8080/img/" + dataSet[i].image + "'>" + dataSet[i].model + "</a></td>";
            tableContent += "<td>" + dataSet[i].price + "</td>";
            tableContent += "</tr>";
        }
        tableContent += "</table>";
        return tableContent;
    }

 

注册，点击，传参格式为表单

代码：

function register() {
    $("body").on("click", "#btnok", function () {
        let userno = $("#userno").val();
        let username = $("#username").val();
        let email = $("#email").val();
        let userpwd = $("#userpwd").val();
        let sex = $('input:radio:checked').val();

        $.ajax({
            type: "post",
            url: "http://120.79.153.0/register.aspx",
            data: {
                userno: userno,
                userpwd: userpwd,
                username: userpwd,
                sex: sex,
                email: email
            },
            complete: function (data) {
                console.log(data);
                if (data.responseText == "TRUE") {
                    alert("注册成功");
                    location.replace("./login.html");
                }
                else {
                    alert("注册失败");
                }
            }
        });
    });
}

 

登录，点击，传参格式为表单

代码：

function login() {
    $("body").on("click", "#btnLogin", function () {
        let userno = $("#userno").val();
        let userpwd = $("#userpwd").val();
        if (userno == "" || userpwd == "") {
            $("#error").append("请输入账号密码");
        }
        else {
            $.ajax({
                type: "post",
                url: "http://120.79.153.0/login.aspx?",
                data: {
                    userno: userno,
                    userpwd: userpwd,
                },
                complete: function (data) {
                    console.log(data);
                    if (data.responseText == "TRUE") {
                        localStorage.setItem("userno", userno);
                        alert("登录成功");
                        location.replace("mainframe.html");
                    }
                    else {
                        alert("登录失败");
                    }
                }
            });
        }
    });

    $("#btnCancel").click(function () {
        $("#userno").val("");
        $("#userpwd").val("");
        $("#error").empty();
    });
}

 

通用构造表格

代码：

function buildTableContent(dataSet) {
    let tableContent = "<table><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr>";
    for (let i = 0; i < dataSet.length; i++) {
        tableContent += "<tr>";
        tableContent += "<td>" + dataSet[i].bookNo + "</td>";
        tableContent += "<td>" + dataSet[i].bookName + "</td>";
        tableContent += "<td>" + dataSet[i].bookPublisher + "</td>";
        tableContent += "<td>" + dataSet[i].bookPublisher + "</td>";
        tableContent += "</tr>";
    }
    tableContent += "</table>";
    return tableContent;
}

 

传递JSON格式参数

代码：

$.ajax({
    type: "post",
    url: "http://114.67.241.121:8088/stu/add",
    headers: {
        'Authorization': window.localStorage.getItem("token"),
        "Content-Type": "application/json",
    },
    async: false,
    data:
        JSON.stringify({
            stuaddess: $("#stuaddess").val(),
            stugender: $("#stugender").val(),
            stugrade: $("#stugrade").val(),
            stuid: $("#stuid").val(),
            stumajor: $("#stumajor").val(),
            stuname: $("#stuname").val(),
            stunative: $("#stunative").val(),
            stuno: $("#stuno").val(),
            stuphone: $("#stuphone").val(),
        }),
})