利用jquery.ajax在jsp頁面動態生成table，可以增加修改，並支持一行和多行刪除
聲明：此為本人原創，只想實現功能，界面樣式方面沒多考慮，很粗糙能看懂就行……2018-5-14
動態生成table，我利用jsp內嵌java代碼從後臺獲取對象集合，輸出的時候有2中方法
1.直接利用java代碼for(b1 b:bs)輸出
2.利用JSTL標簽庫的c:foreach輸出
不同之處在於，利用c:foreach輸出要把獲取的對象集合加入到request，然後用${}來讀取，而for(b1 b:bs)可以直接輸出。
第一種方法--for(b1 b:bs)輸出
<table id="table"> <tr> <th>復選框</th> <th>編輯室名</th> <th>操作</th> </tr> <% DbUtil db=new DbUtil(); b1Dao bdao=new b1Dao(); List<b1> bs=bdao.select(db.getCon());%> <% for(b1 b:bs){ %> <tr> <td><%=b.getId()%></td> <td><%= b.getBjsName()%></td> <td><input name="upd" type="button" value="修改" onClick="upd(this)"/></td> <td><input name="del" type="button" value="刪除" onClick="del(this)"/></td> </tr> <% } %> </table>
-------------------------------------
第二種方法--c:foreach輸出
<table id="table">
<tr>
<th>復選框</th>
<th>編輯室名</th>
<th>操作</th>
</tr>
<%
DbUtil db=new DbUtil();
b1Dao bdao=new b1Dao();
List<b1> bs=bdao.select(db.getCon());
request.setAttribute("bs", bs);
%>
<c:forEach var="b" items="${bs }">
<tr id="+${b.getId()}+">
<td >${b.getId()}</td>
<td>${b.getBjsName()}</td>
<td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td>
<td><input name="del" type="button" value="刪除" onClick="del(${b.getId()})"/></td>
</tr>
</c:forEach>
</table>
說明：這種方法生成的table支持單行刪除和修改，不支持多行刪除
多行刪除和單行修改
1<table id="table"> 2 <tr> 3 <th>復選框</th> 4 <th>編輯室名</th> 5 <th>操作</th> 6 </tr> 7 <% 8 DbUtil db=new DbUtil(); 9 b1Dao bdao=new b1Dao(); 10 List<b1> bs=bdao.select(db.getCon()); 11 request.setAttribute("bs", bs); 12 13 %> 14 <c:forEach var="b" items="${bs }"> 15 <!--單行刪除和修改 --> 16 <%-- <tr id="+${b.getId()}+"> 17 <td >${b.getId()}</td> 18 <td>${b.getBjsName()}</td> 19 <td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td> 20 <td><input name="del" type="button" value="刪除" onClick="del(${b.getId()})"/></td> 21 </tr> --%> 22 <!-- 單行和多行刪除 --> 23 <tr id="+${b.getId()}+"> 24 <td><input type="checkbox" name="test"></td> 25 <td class="idd" >${b.getId()}</td> 26 <td>${b.getBjsName()}</td> 27 <td><input name="upd" type="button" value="修改" onClick="upd(${b.getId()})"/></td> 28 <%-- <td><input name="del" type="button" value="刪除" onClick="del(${b.getId()})"/></td> --%> 29 </tr> 30 31 </c:forEach> 32 </table>
生成的jsp如下圖所示：這個是支持多行刪除的那個，單行刪除的就不做演示了
然後就是實現添加刪除和修改功能了，我這個數據表非常簡單，只有2個數據，一個id（自增），一個編輯室名name
jsp代碼，css我就不貼了
1 <button id="btn1" onClick="add2()">添加</button> <button id="btn2" onClick="del2()" >刪除</button> 2 <div id="aa"> 3 <div class="a"> 4 <form name="add" > 5 <input type="text" name="name"/> 6 <input type="submit" value="添加" onClick="login(this.form)"> 7 </form> 8 </div> 9 <div class="b">//修改 10 <form name="upda" > 11 <input type="hidden" id="nid" /> 12 <input id="uname" type="text" name="name2"/> 13 <input type="submit" value="修改" onClick="upd2()"> 14 </form> 18 </div>
功能都是用$.ajax實現的，jquery封裝了ajax的功能，所以不用原裝的ajax，直接使用jquery.ajax就可以了，而且jar包只需要引入jquery包
這個是添加的js代碼，$.ajax的都是重點，我使用的是servlet+javabean結構
1 function login(form){ 2 if(form.name.value==""){ 3 alert("請輸入編輯室名！"); 4 form.name.focus(); 5 return false; 6 } 8 $.ajax({ 9 url:"/db-5/add?action=add",//註意這個路徑是絕對路徑，要包括項目名的，我這個項目名叫db-5，add是servlet的名，action就是傳到後臺的值 10 type:"POST",//這個可以選擇get什麽的 11 data:"name="+form.name.value, //這個也是要傳到後臺的值，如果省略了這個data,也可以把它們放在url後面，不過我試了下那樣後臺好像取不到值 12 dataType:"json",//這個json也是重點，可以多選，什麽text的，我也是第一次用，反正用json格式不會出錯 13 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止亂碼 14 success:function(data){//這個是處理成功返回的數據，data是後臺輸出的，反正我也不是特別懂 15 if(data == true){ 16 alert("添加成功！");/* window.location.href = "table.jsp"; *///跳轉到主頁 18 }else{ 19 alert("添加失敗！");form.name.focus();return false; 20 } 21 } 22 }); 25 }
這個刪除js,包含了單行刪除和多行刪除的代碼
1 function del(d){//只支持單行刪除的js 2 $(this).parent().remove(); 3 var id=d; 4 $.ajax({ 5 url:"/db-5/add?action=del", 6 type:"POST", 7 data:"id="+id, 8 dataType:"json", 9 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止亂碼 10 success:function(data){ 11 if(data == true){ 12 alert("刪除成功！");window.location = "table.jsp"; //跳轉到主頁 13 14 }else{ 15 alert("刪除失敗！");return false; 16 } 17 } 18 }); 19 } 20 function del2(){//支持單行和多行刪除的js 21 $("input[name=‘test‘]:checked").each(function(){//點擊刪除按鈕觸發這個，找到選中的復選框，然後遍歷 22 $(this).parents("tr").remove();//把該行從jsp移除，數據表並沒有刪 23 var id=$(this).parent().siblings("td.idd").text();//獲取改行的id，實現數據表該數據的刪除 24 //alert(id); 25 $.ajax({//這個和添加類似 26 url:"/db-5/add?action=del",//web.xml和正常那樣配置就行了 27 type:"POST", 28 data:"id="+id, 29 dataType:"json", 30 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止亂碼 31 success:function(data){ 32 if(data == true){ 33 /* alert("刪除成功！");window.location = "table.jsp"; */ //跳轉到主頁 35 }else{ 36 alert("刪除失敗！");return false; 37 } 38 } 39 }); 40 }); 41 }
修改js
1 function upd(d){//打開修改窗口 2 //alert("hah"); 3 $(".b").toggle(); 4 $(".a").hide(); 5 var id=d; 6 $("#nid").val(id); 7 //alert(id); 8 } 10 function upd2(){//修改數據 11 //alert("hah"); 12 13 var nid=$("#nid").val(); 14 var name=$("#uname").val(); 15 //alert("name:"+name); 16 $.ajax({ 17 url:"/db-5/add?action=upd", 18 type:"POST", 19 data:"id="+nid+"&name="+name, 20 dataType:"json", 21 contentType: ‘application/x-www-form-urlencoded; charset=UTF-8‘,//防止亂碼 22 success:function(data){ 23 if(data == true){ 24 alert("更新成功！"); 25 window.location = "table.jsp"; //跳轉到主頁 26 $(".b").hide(); 27 }else{ 28 alert("更新失敗！");return false; 29 } 30 } 31 }); 32 }
疑問：
整體就這樣了，我也是第一次用ajax，雖然基本實現功能了，可我還是不太明白它的處理過程
比如添加一個數據，如果添加成功，彈出成功窗口，table自動刷新，但並沒有刷新整個頁面，我很奇怪為什麽沒有刷新整個頁面，table表就能自動更新了呢，畢竟table是用java內嵌代碼生成的阿，按照代碼從上到下執行的原理，java代碼之前執行過了，怎麽可能還會在執行一次呢，這是疑問1
還有就是每次添加修改或刪除成功，有時彈出成功提示窗口（alert("添加成功“)），有時候卻不提醒（我設置的是只要成功都會提示的）table也沒自動刷新，如果再添加的話它就會提醒而且table也會自動刷新，實際上每次數據都是成功插入的，問題就出現在table自動刷新這塊，這又跟疑問1掛鉤了，
當然你可以在插入成功，彈出提示，在用 window.location = "table.jsp";刷新整個頁面，這樣也會有毛病，table有時刷新成功有時候又不能，當然這樣做的話，用ajax就有點多余了，
總結：到現在我在迷糊中，畢竟第一次使用ajax，希望有高人看到能解答我的疑問，在此感激不盡。
利用jquery.ajax在jsp頁面動態生成table，可以增加修改，並支持一行和多行刪除