ajax實現增刪改查的一個實例

jopen 9年前發布 | 8K 次閱讀 JavaScript Ajax 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>
</pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！