蒋鹏冲-20221130-Ajax02

一，今日学习内容：
1.// ajax封装
function ajaxPs() {
    let query = 'id=' + ipt.value;
    // 发送ajax请求
    var xhr = new XMLHttpRequest();

    xhr.open('post', 'http://121.89.216.9/show');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.send(query);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // console.log(JSON.parse(xhr.responseText));
            let res = JSON.parse(xhr.responseText).data;
            // 渲染
            rendList(res);
        }
    }
}
function ajaxPl() {
    // 发送ajax请求
    var xhr = new XMLHttpRequest();

    xhr.open('post', 'http://121.89.216.9/list');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // console.log(JSON.parse(xhr.responseText));
            let res = JSON.parse(xhr.responseText).data;
            // 渲染
            rendList1(res);
        }
    }
}

// 渲染
function rendList(res) {
    let html = `
            <tr>
                <td>${res.id}</td>
                <td>${res.name}</td>
                <td>${res.age}</td>
                <td>${res.sex}</td>
                <td>${res.tel}</td>
            </tr>`
    document.querySelector('table').innerHTML = html;
}

function rendList1(stuList) {
    let html = '';
    stuList.forEach(function (item, index) {
        // console.log(item);
        html += `<tr data-index='${item.id}' class='tr'>
                    <td>${item.id}</td>
                    <td>${item.name}</td>

                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.tel}</td>
                    <td><button class="edit">编辑</button><button class="del">删除</button></td>
                </tr>`
        // <td>${item.sno}</td>
    });
    // console.log(html);
    tbody.innerHTML = html;
}