ajax实现增删改查的一个实例

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Common/Common.js" type="text/javascript"></script>
    <style type="text/css">
         #tbList
         {
             border-left:1px solid #0088F7;
             border-top:1px solid #0088F7;
             font-size:30px;
         }
         #tbList tr td
         {
             border-right:1px solid #0088F7;
             border-bottom:1px solid #0088F7;
         }
    </style>
    <script type="text/javascript">
        var cId = -1;
      
        window.onload = function () {
            GetPageList(1);
            gel("btnCancel").onclick = hidePannel;
            gel("btnConfirm").onclick = doModify;
        }
        function GetPageList(pi) {
            var xhr = new XMLHttpRequest();
            xhr.open("get", "AjaxList.ashx?do=l&pi="+pi, true);
            xhr.setRequestHeader("If-Modified-Since", "0");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var text = xhr.responseText;
                        var jason = eval("(" + text + ")");
                        var tbList = gel("tbList");
                        for (i = 0; i < jason.length; i++) {
                            var row = tbList.insertRow(-1);
                            var col1 = row.insertCell(-1);
                            col1.innerHTML = jason[i].CID;

                            var col2 = row.insertCell(-1);
                            col2.innerHTML = jason[i].CName;

                            var col3 = row.insertCell(-1);
                            col3.innerHTML = jason[i].CCount;

                            var col4 = row.insertCell(-1);
                            var c = jason[i].CImg;
                            col4.innerHTML = "<img src='./Upload/" + jason[i].CImg + "' width='100'/>";
                            // "<img src='Upload/" + jason[i].CImg + "' width='100px' />";

                            var col5 = row.insertCell(-1);
                            col5.innerHTML = "<a href='javascript:doDel(" + jason[i].CID + ")'>删</a> <a href='javascript:showPanel(" + jason[i].CID + ")'>改</a>";
                        }

                    }
                }
            }
            xhr.send(null);
        }
        //获得班级信息显示到div中
        function showPanel(id) {
            gel("operPannel").style.display = "block";
            cId = id;
            //在div中显示班级名称和人数
            var tbList = gel("tbList");
            for (i = 0; i < tbList.rows.length; i++) {
                if (tbList.rows[i].childNodes[0].innerHTML == id) {
                    gel("txtName").value = tbList.rows[i].childNodes[1].innerHTML;
                    gel("txtCount").value = tbList.rows[i].childNodes[2].innerHTML;
                    break;
                }
            }
        }
        function doDel(id) {
            if (confirm("确定要删除吗?")) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", "AjaxList.ashx?do=d&id=" + id, true);
                xhr.setRequestHeader("If-Modified-Since", "0");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var str = xhr.responseText;
                            switch (str) {
                                case "yes":
                                    alert("删除成功!");
                                    break;
                                case "no":
                                    alert("删除失败!");
                                    break;
                                case "error":
                                    alert("参数错误!" + str);
                                    break;
                                default:
                                    alert("未知的错误!");
                            }
                          
                        }
                    }
                }
                xhr.send(null);
            }
            window.location = "AjaxList.htm";
        }


        function doModify() {
            var xhr = new XMLHttpRequest();
            xhr.open("Post", "AjaxList.ashx", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var str = xhr.responseText;
                        switch (str) {
                            case "yes":
                                //更新成功,修改html中的内容
                                alert("更新成功!");
                                var tbList = gel("tbList");
                                for (i = 0; i < tbList.rows.length; i++) {
                                    if (tbList.rows[i].childNodes[0].innerHTML == cId) {
                                        tbList.rows[i].childNodes[1].innerHTML = gel("txtName").value;
                                        tbList.rows[i].childNodes[2].innerHTML = gel("txtCount").value;
                                    }

                                }

                                break;
                            case "no":
                                alert("更新失败!");
                                break;
                            case "error":
                                alert("参数出现错误");
                                break;
                            default:
                                alert("未知的错误!");
                        }
                        hidePannel();
                    }
                }
            }
            var str ="do=m&cId=" + cId + "&cName=" +encodeURI(gel("txtName").value) + "&cCount=" +encodeURI( gel("txtCount").value);
            xhr.send(str);
        }
        //隐藏div
        function hidePannel() {
            gel("operPannel").style.display = "none";
        }
    </script>
</head>
<body>
    <center>
        <table id="tbList" cellspacing="0">
            <tr>
                <td>
                    ID
                </td>
                <td>
                    名称
                </td>
                <td>
                    人数
                </td>
                <td>
                    图片
                </td>
                <td>
                    操作
                </td>
            </tr>
        </table>
        <br />
        <br />
        <div id="operPannel" style="display:none">
            名称:<input type="text" id="txtName"/><br />
            人数:<input type="text" id="txtCount" /><br />
            <input type="button" value="确定" id="btnConfirm" />&nbsp&nbsp&nbsp&nbsp<input type="button" value="取消" id="btnCancel" />
        </div>
    </center>

</body>
</html>