AJAX 实现删除效果(同时更新页面值)

最新推荐文章于 2022-10-15 02:17:08 发布

原创最新推荐文章于 2022-10-15 02:17:08 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #safari #firefox #opera

C# ASP.NET 专栏收录该内容

135 篇文章

订阅专栏

本文介绍了一种使用AJAX实现动态删除数据并实时更新页面的方法。通过创建XMLHttpRequest对象，设置请求头，发送POST请求到处理页面，并在响应状态改变时处理返回的响应数据，实现无刷新的页面更新。当接收到'ok'响应时，从表格中删除对应ID的行，从而完成数据的删除和页面的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        function gel(id) {
            return document.getElementById(id);
        }
        function createXmlHttp() {//创建xhr对象
            var xhobj = false;
            try {
                xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
            } catch (e) {
                try {
                    xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
                } catch (e2) {
                    xhobj = false;
                }
            }
            if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
                xhobj = new XMLHttpRequest();
            }
            return xhobj;
        }
        var xhr = false;
        window.onload = function () {
            xhr = createXmlHttp();
        }
        function doDel(id) {
            xhr.open("POST", "Del.ashx", true);//AJAX异步操作
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//表单方式
            xhr.onreadystatechange = watching;
           xhr.send("aid=" + id);//值
        }
        function doModify(id) {
            window.location.href = "Modify.aspx?id=" + id;//修改
        }
        function watching() {
            if (xhr.readystate == 4) {
                if (xhr.status == 200){
                    var txt = xhr.responseText;
                    var txtArray = txt.split(",");//ok,2 返回过来的是(ok,2)
                    alert(txt);
                    if (txtArray[0] == "ok") {
                        var tbRows = gel("tbList").rows; //得到整个表格的行集合
                        for (i = 0; i < tbRows.length; i++) {
                            if (tbRows[i].childNodes[1].innerHTML == txtArray[1]) {
                                gel("tbList").deleteRow(i); //删除id相同的行
                                break;
                            } 
                        }
                    } else {
                        alert("删除失败");
                    }
                    
                }
            }
        
        }

上面为用AJAX实现删除数据更新页面内容。