用Ajax實現分頁和刪除(三)

實現刪除：

在jsp頁面中：

//當點擊刪除操作的時候

       var delHtmlBtn = getNode("delBtn");

       //註冊事件

       delHtmlBtn.onclick = function() {

 

           var ids = "";

           var delchksNode = document.getElementsByName("delchk");

           for ( var i = 0; i < delchksNode.length; i++) {

              if (delchksNode[i].checked) {

                  ids += delchksNode[i].value + ",";

              }

 

           }

 

           //第一步：建立xmlHttpRequest對象

           var xmlHttp = createXMLHttpRequest();

 

           //清空

           clearNodes(empsHtmlNode);

 

           xmlHttp.onreadystatechange = function() {

              if (xmlHttp.readyState == 4) {

                  if (xmlHttp.status == 200) {

                     //擷取 xmlDocument

                     var xmlDoc = xmlHttp.responseXML;

                     //擷取跟標籤

                     var rootNode = xmlDoc.documentElement;

                     //擷取 xml檔案中 emp 的所有的元素節點

                     var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"

                     //擷取 emp 節點裡邊所有的孩子節點

                     for ( var
i = 0; i < emps.length; i++) {

                         //得到一個具體的emp：

                         var empNode = emps[i];

                         //為emp建立一行

                         var tr = document.createElement("tr");

                         //建立序號的 td

                         var td1 = document.createElement("td");

                         td1.appendChild(document.createTextNode(emps[i]

                                .getAttribute("id")));

                         tr.appendChild(td1);

 

                         var elementNodes = empNode.childNodes; //name ,sex ,age

                         for ( var
j = 0; j < elementNodes.length; j++) {

 

                            //節點是否是元素節點

                            if (elementNodes[j].nodeType == 1) {

                                var td2 = document.createElement("td");

                                td2

                                       .appendChild(document

                                              .createTextNode(elementNodes[j].firstChild.nodeValue));

                                tr.appendChild(td2);

                            }

                         }

 

                         var delchk = document.createElement("input");

                         delchk.setAttribute("type", "checkbox");

                         delchk.setAttribute("name", "delchk");

                         delchk.setAttribute("value", emps[i]

                                .getAttribute("id"));

                         tr.appendChild(delchk);

                         empsHtmlNode.appendChild(tr);

 

                     }

 

                     //調用分頁建立分頁相關的node節點對象

                     pagesNode(pagesHtmlNode, rootNode);

                  }

              }

}

 

           //第二步：規定請求參數

           xmlHttp.open("GET", "./delServlet?ids=" + ids

                  + "&timeStamp=" + new Date().getTime(),
true);

           //第三步：發送請求

           xmlHttp.send(null);

       }

 

       //實現全選 全部選的效果

       var chksHtmlNode = getNode("chk");

 

       //註冊的事件

       chksHtmlNode.onclick = function() {

           var delchksNode = document.getElementsByName("delchk");

           if (chksHtmlNode.checked) {

              for ( var i = 0; i < delchksNode.length; i++) {

                  delchksNode[i].checked = "checked";

              }

           } else {

              for ( var i = 0; i < delchksNode.length; i++) {

                  delchksNode[i].checked = null;

              }

           }

       }

刪除所對應的servlet中的方法如下：

public void doGet(HttpServletRequest request, HttpServletResponseresponse)

           throws ServletException, IOException {

       request.setCharacterEncoding("UTF-8");

      

       String ids = request.getParameter("ids");

       //1,2,3,

       String values[] = ids.split(",");

       System.out.println(values.length);

       for(int i=0;i<values.length;i++){

           employeeService.deleteById(Integer.parseInt(values[i]));

          

       }

    request.getRequestDispatcher("/employeeServlet").forward(request,response);

    }