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

标题: 陈紫怡-20221130-Ajax-2 [打印本页]

作者: Dasmondlicht 时间: 2022-11-30 23:28
标题: 陈紫怡-20221130-Ajax-2
一、今日学习内容：function addNew() {
         let url = `http://121.89.216.9/create?name=${userName.value}&age=${age.value}&sex=${sex.value}&password=${pwd.value}&tel=${tel.value}`;

         var xhr = new XMLHttpRequest();
         xhr.open('get', url);
         xhr.send();

         //
         xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                  // console.log(JSON.parse(xhr.responseText));
                  // 3.返回数据
                  if (JSON.parse(xhr.responseText).mes = '成功') {
                     // 弹窗关闭
                     cover.style.display = 'none';
                     addBox.style.display = 'none';
                     // 页面数据更新
                     getStuList();
                  }
            }
         }
      }

// 新增的点击事件
      add.addEventListener('click', function () {
         // 1.表单内容验证
         // if(userName.value!=''&&age.value!=''&&tel.value!=''&&sex.value!=''&&pwd.value!='')
         // if (!!userName.value && !!age.value && !!tel.value && !!sex.value && !!pwd.value)
         if (Boolean(userName.value) && Boolean(age.value) && Boolean(tel.value) && Boolean(sex.value) && (pwd.value)) {
            // 2.发送请求
            addNew();
         }
      })
      // 删除功能
      // 事件委派---编辑，删除，委派给tbody
      tbody.addEventListener('click', function (event) {
         let index;
         // console.dir(event.target);
         if (event.target.className == 'edit') {
            // console.log('执行编辑操作');
            // console.log(event.target.closest('.tr').dataset);
            index = event.target.closest('.tr').dataset.index;

            // name
            // 遮罩层出现
            cover.style.display = "flex";
            // 编辑弹窗出现
            edit.style.display = "block";

            // 获取ipt的value---点击确认---编辑弹窗的确认按钮

            // index的值保存到会话存储中
            sessionStorage.setItem('id', index);

            // 调用数据回流的方法
            setData(index);

         } else if (event.target.className == 'del') {
            // console.log('执行删除操作');
            // console.log(event.target.closest('.tr').dataset);
            index = event.target.closest('.tr').dataset.index;

            // 发送删除请求
            var xhr = new XMLHttpRequest();
            xhr.open('get', `http://121.89.216.9/delete?id=${index}`);
            xhr.send();

            // 成功的提示
            xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4) {
                     // console.log(xhr.responseText);
                     alert(JSON.parse(xhr.responseText).mes);
                     getStuList();
                  }
            }
         }

         // console.log(index);
      })

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