实习第九天——Ajax 、批量删除

目录

Ajax

批量删除实现

运行

---

Ajax

        Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。这就是Web的运作原理：一次HTTP请求对应一个页面。如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

https://blog.csdn.net/weixin_39194176/article/details/80933777

批量删除实现

实际过程为：添加jquery-ui框架、script中添加deleteAll()和函数、应用层、持久层添加方法、控制层添加与页面交互的函数、mapper层添加SQL语句，js实现局部刷新

导入jquery-ui框架

触发按钮的添加

<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()">
											<i class="fa fa-refresh"></i> 删除
										</button>

script中添加deleteAll()

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		function deleteAll(){
		    var checkNum=$("input[name='ids']:checked").length;
			if(checkNum == 0){
			    alert("请至少选择一项")
				return;
			}
            var userList;
			if(confirm("确定删除？")){
				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>

service 层

@Override
    public void deleteAll(List<Integer> ids) {
        userInfoDao.deleteAll(ids);
    }

持久层dao

 void deleteAll(List<Integer> ids);

mapper层 UserInfoMapper.xml SQL语句

<delete id="deleteAll" parameterType="list" >
        delete from userinfo where id in
        <foreach collection="list" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </delete>

控制层UserInfoController.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 "";
    }

运行