AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
http://www.w3school.com.cn/ajax/index.asp
AJAX的功能简单来说,就是在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
Ajax实现批量删除
如下图所示,现在要批量删除37,38的记录
批量删除按钮调用deleteAll()
<button type="button" class="btn btn-default" title="批量删除" onclick="deleteAll()">
<i class="fa fa-refresh"></i> 批量删除
</button>
Ajax向deleteAll.do发送请求
获取所有勾选的id,发送到服务器
<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>
后台接收列表数据,提取出id,实现批量删除
@RequestMapping("deleteAll.do")
@ResponseBody
public String deleteAll(String userList){
String[] strings=userList.split(",");
List<Integer> ids=new ArrayList<>();
for ( String s:strings ) {
ids.add(Integer.parseInt(s));
}
userInfoService.deleteAll(ids);
return "";
}
UserInfoService.java
public interface IUserInfoService extends UserDetailsService {
void deleteAll(List<Integer> ids);
}
UserInfoServiceImpl.java
@Service("userInfoService")
public class UserInfoServiceImpl implements IUserInfoService {
@Autowired
IUserInfoDao userInfoDao;
@Override
public List<UserInfo> findAll(int page, int size) {
@Override
public void deleteAll(List<Integer> ids) {
userInfoDao.deleteAll(ids);
}
}
IUserInfoDao .java
public interface IUserInfoDao {
void deleteAll(List<Integer> ids);
}
UserInfoMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zhongruan.dao.IUserInfoDao">
<delete id="deleteAll" parameterType="list">
delete from userinfo
where id in
<foreach collection="list" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
</mapper>
测试效果: