码迷,mamicode.com
首页 > Web开发 > 详细

Ajax 的异步调用和批量修改

时间:2018-12-06 01:31:37      阅读:503      评论:0      收藏:0      [点我收藏+]

标签:var   request   value   function   ble   page   alt   技术分享   ima   

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      }

 

Ajax 的异步调用和批量修改

标签:var   request   value   function   ble   page   alt   技术分享   ima   

原文地址:https://www.cnblogs.com/islandlxl/p/10074347.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!