Ajax 的异步调用和批量修改

Posted islandlxl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax 的异步调用和批量修改相关的知识,希望对你有一定的参考价值。

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 的异步调用和批量修改的主要内容,如果未能解决你的问题,请参考以下文章

tp5+bootstrap+ajax进行基本的CRUD

前端面试题之手写promise

AJAX相关JS代码片段和部分浏览器模型

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

Ajax部分

从片段中调用分离的异步任务类