利用jquery.ajax在jsp页面动态生成table,可以增加修改,并支持一行和多行删除

声明:此为本人原创,只想实现功能,界面样式方面没多考虑,很粗糙能看懂就行……2018-5-14

还有之所以我会在jsp用java代码输出table,而没用ajax返回的数据实现添加什么的,主要一开始我不是特别懂,而且我表单都用了submit,这样每次ajax添加修改过后页面会自动刷新,js append的行总是一闪就不见了,所以我要在前台输出table,后来改了下代码,不在用java输出table了,直接利用ajax动态添加,新的代码我放在了新的文章里了。。

动态生成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>&nbsp;&nbsp;&nbsp;<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

解答:这是因为页面刷新了,使用了submit提交表单

还有就是每次添加修改或删除成功,有时弹出成功提示窗口(alert("添加成功“)),有时候却不提醒(我设置的是只要成功都会提示的)table也没自动刷新,如果再添加的话它就会提醒而且table也会自动刷新,实际上每次数据都是成功插入的,问题就出现在table自动刷新这块,这又跟疑问1挂钩了,

当然你可以在插入成功,弹出提示,在用 window.location = "table.jsp";刷新整个页面,这样也会有毛病,table有时刷新成功有时候又不能,当然这样做的话,用ajax就有点多余了,

 解答:和1一样

 

 

posted on 2018-05-15 00:40 senn0213 阅读(...) 评论(...) 编辑 收藏

公告

统计

  • 随笔 - 13
  • 文章 - 0
  • 评论 - 1