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

标题: 王文博--20221130--Ajax-day02 [打印本页]

作者: 博5237 时间: 2022-12-1 08:39
标题: 王文博--20221130--Ajax-day02
一、今日学习内容
function getList() {
         var xhr = new XMLHttpRequest();

         xhr.open('post', 'http://121.89.216.9/list');

         xhr.send();

         xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                  let stureg = xhr.responseText;
                  // console.log(JSON.parse(xhr.responseText));
                  if (JSON.parse(stureg).code == 0) {
                     let stuList = JSON.parse(stureg).data;
                     // console.log(stureg);

                     let html = '';
                     stuList.forEach(function(item, index) {
                        html += `<tr data-index='${item.id}' class="tr">
                                    <td>${item.id}</td>
                                    <td>${item.name}</td>
                                    <td>${item.password}</td>
                                    <td>${item.sex}</td>
                                    <td>${item.age}</td>
                                    <td>${item.tel}</td>
                                    <td><button class="edit">编辑</button>
                                          <button class="del">删除</button>
                                          </td>
                                 </tr>`;
                        return tbody.innerHTML = html;
                     })
                  }
            }
         }
      }

      function getstuList() {
         return getList();

      };

      //提交事件--新增
      btn.addEventListener('click', function() {
         //表单内容验证
         if (Boolean(userName.value) && Boolean(pwd.value) && Boolean(sex.value) && Boolean(age.value) && Boolean(tel.value)) {
            //发送请求

            let query = `name=${userName.value}&age=${age.value}&sex=${sex.value}&password=${pwd.value}&tel=${tel.value}`;

            console.log(query);
            var xhr = new XMLHttpRequest();
            xhr.open('post', ` http://121.89.216.9/create`);
            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))
                     if (JSON.parse(xhr.responseText).mes == '成功') {

                        getstuList();
                     }
                  }
            }

         }
      });

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