利用ajax删除多条信息,利用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)输出

复选框	编辑室名	操作

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