jquery ajax实现批量删除具体思路及代码_AJAX相关

js页面jquery代码

复制代码 代码如下:

// JavaScript Document
$(document).ready(function() {
// 全选
$("#allChk").click(function() {
$("input[name='subChk']").prop("checked",this.checked);
});
// 单选
var subChk = $("input[name='subChk']")
subChk.click(function() {
$("#allChk").prop("checked", subChk.length == subChk.filter(":checked").length ? true:false);
});
/* 批量删除 */
$("#del_model").click(function() {
// 判断是否至少选择一项
var checkedNum = $("input[name='subChk']:checked").length;
if(checkedNum == 0) {
alert("请选择至少一项!");
return;
}
// 批量选择
if(confirm("确定要删除所选项目?")) {
var checkedList = new Array();
$("input[name='subChk']:checked").each(function() {
checkedList.push($(this).val());
});
$.ajax({
type: "POST",
url: "deletemore",
data: {'delitems':checkedList.toString()},
 success: function(result) {
$("[name ='subChk']:checkbox").attr("checked", false);
window.location.reload();
}
});
}
});
});
页面元素
<a href="#" id="del_model"><span>删除用户</span>
<th class="tal"><input type="checkbox" id="allChk"/>全选</th>
<td><input type="checkbox" name="subChk" value="${user.id}"/></td>

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉(因为是用到了freemarker的list循环,去掉是数据后checkbox序号变化,还有有相应未知的checkbox被选中,需要去掉)。

复制代码 代码如下:

success: function(result) {
$("[name = 'items']:checkbox").attr("checked", false);
window.location.reload();
}

java后台代码

复制代码 代码如下:

@RequestMapping(value = "/deletemore", method = RequestMethod.POST)
public String deleteMore(HttpServletRequest request, HttpServletResponse response) {
String items = request.getParameter("delitems");
String[] item = items.split(",");
for (int i = 0; i < item.length; i++) {
userService.delete(Integer.parseInt(item[i]));
}
return "redirect:list";
}

效果图:

时间: 2025-01-20 23:45:47

jquery ajax实现批量删除具体思路及代码_AJAX相关的相关文章

jquery ajax实现批量删除具体思路及代码

js页面jquery代码: 复制代码 代码如下: // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 var subChk = $("input[name='subChk']&

jQuery Ajax使用心得详细整理及注意事项_AJAX相关

IE7及以下请求方式用GET的话,URL的限制是个很容易忽视的问题(最大2083个字符).所以如果URL有可能过长的话,一定要用POST. -------------------------------------------------------------------------------- 终止Ajax请求 终止请求需要调用XMLHttpRequest对象的abort()方法 而在jQuery中的$.get,$.post.$.ajax.$.getJSON.$.getScript...的

Ajax修改数据即时显示篇实现代码_AJAX相关

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

Ajax+Struts2实现验证码验证功能实例代码_AJAX相关

众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

ajax传递多个参数的实现代码_AJAX相关

本文实例为大家分享了ajax传递多个参数的具体代码,供大家参考,具体内容如下 <html > <head> <title></title> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(

ajax验证用户名和密码的实例代码_AJAX相关

本文实例为大家介绍了ajax验证用户名和密码的具体代码,供大家参考,具体内容如下 1.ajax主体部分     var xmlrequest; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlrequest=new XMLHttpRequest(); } else if(window.ActiveXObject){ try{ xmlrequest=new ActiveXObject("Msxm12.XMLHTTP&qu

Asp.net利用JQuery AJAX实现无刷新评论思路与代码_实用技巧

首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个<table>标签用来占位输出评论内容. Html页面代码就这样简单就行了: 复制代码 代码如下: <body><table id="room"> </table> <div> 用户名:<input id="Text1

AJAX和三层架构实现分页功能具体思路及代码_AJAX相关

复制代码 代码如下: -----------------------------HTMLPage1.htm--------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> table{ border:solid 1px #44

Ajax实现的异步传输与验证示例代码_AJAX相关

Ajax异步传输用得很广,就拿web开发来说吧,当用户注册时,当用户刚一输完,怎么立即判断用户是否存在,并在输入框后显示提示?这就用到了异步传输~~ 它可以让你不离开页面的情况下,获取后台你想要的数据,并显示在当前页面!!好的,下面看个例子 下面是一段Ajax验证代码 复制代码 代码如下: <script type="text/javascript"> //① 设置变量 var xmlHttp ; var flag = false ; var package_name; /