中软国际实训全记录——第七天

中软国际实训第七天——实现多条信息的删除

实现对用户信息的多条删除，我们需要使用到aiax，AJAX不是JavaScript的规范，它是Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。 如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。 这就是Web的运作原理：一次HTTP请求对应一个页面。 如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。 最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。 用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。 首先我们需要将老师发给我们的js文件夹直接复制到webapp目录下。

在将js添加进去之后，我们需要在user-list中配置。

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>

我们需要删除多条时，首先在userInfoService中添加一个方法，这个方法是用来删除复选的多个用户的，因此其操作的对象是一个List的结构。

void deleteAllUser(List<Integer> ids);

在IUserInfoDao中编写方法，来编写方法对数据库进行操作。

UserInfo DeleteAllUser(List<Integer> ids);

sql语句的编写

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

在这条sql的语句中有一个循环结构，因为我们需要删除的是多条信息，这个信息包是通过List传递过来的。delete语句删除多条数据是通过（info1，info2，info3，…，）来限制查询的范围。 对于用户的批量删除，我们还需要将user-info中的刷新按钮改为删除按钮，并给其添加点击事件，在此处，按钮的点击事件被添加在xml文件之中。

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

这样就可以批量删除选择的用户信息。