中软国际实训-第八天

Ajax实现批量删除

Ajax简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

导入js包

然后在user-list导入js环境

代码

批量删除是基于删除这个功能的基础上实现的，通过checkbox返回选中的对象，挨个执行删除操作。
user-list

	<script type="text/javascript">
	function deleteAll(){
	    var checkNum=$("input[name='ids']:checked").length;
        if(checkNum==0) {
            alert("请至少选择一项");
            return;
         }
         if(confirm("确定要删除吗？")){
            var userList=new Array();
            $("input[name='ids']:checked").each(function () {
                userList.push($(this).val())
            });
           $.ajax({
               type:"post",
               url:"${pageContext.request.contextPath}/user/deleteAll.do",
               data:{userList:userList.toString()},
               success:function () {
                   alert("删除成功");
                   location.reload();
               },
               error:function () {
                    alert("删除失败");
               }
           })
         }
	}

	</script>
**********************************************************
<button type="button" class="btn btn-default" title="批量删除"
 onclick="deleteAll()" >
	<i class="fa fa-refresh"></i> 批量删除
</button>
//调用deleteAll()

Controller.java

     @RequestMapping("deleteAll.do")
    @ResponseBody
    public String deleteAll(String userList){
        String[] strs =userList.split(",");
        List<Integer> ids=new ArrayList<>();
        for(int i=0;i<strs.length;i++){
            ids.add(Integer.parseInt(strs[i]));
        }
        userinfoService.deleteAll(ids);
        return "";
    }
    }

Mapper.xml

	    
        delete from userinfo where id in
        
          #{id}
        
    

其他的dao，Service，根据Controller的代码也能知道怎么写，这里就不赘述。

效果

总结

load()可以远程载入HTML并插入到DOM中。结构为：

load(url [,data] [,callback])

• url(String):服务端资源的url。
• data(Obejct):发送到服务器的key/value数据
• callback(Function):请求完成时(无论成功或失败)的回调函数，在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。

$.get()
$.get()结构为：

$.get(url [, data] [, callback] [, type])

$.get()参数说明：

• url(String):请求的服务器端资源的url data(Object):以key/value的形式构造查询字符串追加到url
• callback(Function):在请求成功(success)时被调用。将请求结果和状态传递给该方法。
• type(String):服务器端返回内容的格式

$.post()
除了对服务器的状态和应用的模型数据的影响，.get()和.post()还有以下区别：

• GET请求会将参数跟在url后进行传递，POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。
• GET对传输的数据大小有限制(通常不大于2kb)，使用POST方式传递的数据量比GET大得多(理论上不受限制)
• GET方式请求的数据会被浏览器缓存，这种情况可能带来安全问题。
  .get()和.post()的结构和使用方式都相同。