实习第九天——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 ""; }

运行