菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 蒋鹏冲-20221130-Ajax02 [打印本页]

作者: 北纬33 时间: 2022-11-30 23:42
标题: 蒋鹏冲-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;
}

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)