陈紫怡-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);
        })