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

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


实现对用户信息的多条删除,我们需要使用到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目录下。

中软国际实训全记录——第七天_第1张图片
在将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>

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

你可能感兴趣的:(中软国际实训)