声明:此为本人原创,只想实现功能,界面样式方面没多考虑,很粗糙能看懂就行……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)输出
复选框 | 编辑室名 | 操作 |
---|
b1Dao bdao=newb1Dao();
List bs=bdao.select(db.getCon());%>
for(b1 b:bs){%>
-------------------------------------
第二种方法--c:foreach输出
复选框 | 编辑室名 | 操作 |
---|
DbUtil db=new DbUtil();
b1Dao bdao=new b1Dao();
List bs=bdao.select(db.getCon());
request.setAttribute("bs", bs);
%>
${b.getId()}${b.getBjsName()}说明:这种方法生成的table支持单行删除和修改,不支持多行删除
多行删除和单行修改
1
2
3
复选框4
编辑室名5
操作6
7
8 DbUtil db=newDbUtil();9 b1Dao bdao=newb1Dao();10 List bs=bdao.select(db.getCon());11 request.setAttribute("bs", bs);12
13 %>
14
15
16
17
${b.getId()}18
${b.getBjsName()}19
20
21 --%>
22
23
24
25
${b.getId()}26
${b.getBjsName()}27
28 --%>
29
30
31
32
生成的jsp如下图所示:这个是支持多行删除的那个,单行删除的就不做演示了
然后就是实现添加删除和修改功能了,我这个数据表非常简单,只有2个数据,一个id(自增),一个编辑室名name
jsp代码,css我就不贴了
1 添加 删除
2
3
4
5
6
7
8
9
10
11
12
13
14
18
功能都是用$.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){//只支持单行删除的js2 $(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(){//支持单行和多行删除的js21 $("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,希望有高人看到能解答我的疑问,在此感激不尽。
原文:https://www.cnblogs.com/senn0213/p/senn0213.html