Ajax 的异步调用和批量修改

最新推荐文章于 2021-08-05 13:44:43 发布

weixin_30652879

最新推荐文章于 2021-08-05 13:44:43 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/islandlxl/p/10074347.html

本文介绍如何在多个JSP页面间使用AJAX进行异步数据调用和分页显示，以及如何实现批量状态修改的功能。通过示例代码展示了序列化表单数据、加载指定URL内容到页面元素和使用POST请求进行批量操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX的异步调用的分层

有四个jsp页面，在index.jsp页面上

要在dataDiv出显示调用的的数据回显到此处，可以让showStudent2.jsp页面的数据回调到此处，$("#dataDiv").load(url)加载，注 var data=$("f").serialize()表单数据序列化

 1 <script>
 2      function go(page)
 3      {
 4          $("#current").val(page);
 5          var data = $("#f").serialize(); //  xh=1&xm=yyy&
 6         
 7          var url = "${pageContext.request.contextPath}/showStudent2?"+data;
 8         
 9          $("#dataDiv").load(url);
10          
11      }
12      
13      go(1);
14    </script>

在showStudent2.jsp页面上

回调之后的显示

*****使用AJAX批量的修改showStudent.jsp页面上的显示如下

ajax代码

 1      //批量启用
 2      function batchEnable(status)
 3      {
 4            //得到选中id
 5            var ids = "-1";
 6            $(".chk:checked").each(function(){
 7                ids = ids+","+this.value;
 8              
 9            }); 
10           
11           var url = '${pageContext.request.contextPath}/changeStatus2';
12           var data = {ids:ids,status:status};
13           var callback = function(data)
14           {
15              
16                //修改界面
17               $(".chk:checked").each(function(i,o){
18                  
19                       if (status==1)
20                       {
21                            var tr = $(o).parent().parent();
22                            tr.children("td").eq(4).html("已启用");
23                             tr.children("td").eq(5).children("button:first").html("禁用");
24                        }
25                        else 
26                      {
27                            var tr = $(o).parent().parent();
28                            tr.children("td").eq(4).html("已禁用");
29                             tr.children("td").eq(5).children("button:first").html("启用");
30                        }
31                     
32               });
33                 
34               
35           }
36           $.post(url,data,callback);
37      }
38      
39      
40      function update(xh)
41      {
42          var url = '${pageContext.request.contextPath}/toUpdateView/'+xh;
43          location  = url;
44 
45      }