欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-10 08:34:38
声明:此为本人原创,只想实现功能,界面样式方面没多考虑,很粗糙能看懂就行……2018-5-14 动态生成table,我利用jsp内嵌java代码从后台获取对象集合,输出的时候有2中方法 1.直接利用java代码for(b1 b:bs)输出 2.利用JSTL标签库的c:foreach输出 不同之处在于 ......

声明:此为本人原创,只想实现功能,界面样式方面没多考虑,很粗糙能看懂就行……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如下图所示:这个是支持多行删除的那个,单行删除的就不做演示了

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

然后就是实现添加删除和修改功能了,我这个数据表非常简单,只有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

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

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

 

总结:到现在我在迷糊中,毕竟第一次使用ajax,希望有高人看到能解答我的疑问,在此感激不尽。