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

 更新时间:2013年04月07日 17:24:46   作者:  
回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈,希望对你有所帮助
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";
}

效果图:

相关文章

  • Fly拦截全局Ajax请求的方法

    Fly拦截全局Ajax请求的方法

    这篇文章主要介绍了Fly拦截全局Ajax请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 聊一聊Ajax的优缺点

    聊一聊Ajax的优缺点

    和大家一起聊一聊Ajax的优缺点,Ajax是一个动态的WEB应用的开发技术,它的出现丰富了用户的体验,今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JQuery ajax返回JSON时的处理方式 (三种方式)

    JQuery ajax返回JSON时的处理方式 (三种方式)

    json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面由脚本之家小编给大家分享JQuery ajax返回JSON时的处理方式 (三种方式),需要的朋友可以参考下
    2015-09-09
  • AJAX实现瀑布流布局

    AJAX实现瀑布流布局

    这篇文章主要介绍了AJAX实现瀑布流布局的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 一个奇怪的问题使用ajax提交必须alert才能赋值

    一个奇怪的问题使用ajax提交必须alert才能赋值

    在使用ajax提交的时候将返回值赋给一个变量,无论怎么写都没法赋值,刚开始怀疑js有错但是ie没有反应过来,多次清缓存、部程序都没效果
    2014-01-01
  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    最近做了个项目,其中有项目需求是这样的,点击一个文件链接下载该文件,同时向后台发送请求,在开发过程中问题百出,小编把问题总结分享在脚本之家平台,供大家参考
    2016-01-01
  • 快速解决ajax返回值给外部函数的问题

    快速解决ajax返回值给外部函数的问题

    今天小编就为大家分享一篇快速解决ajax返回值给外部函数的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax添加数据即时显示信息篇

    Ajax添加数据即时显示信息篇

    经过前3篇的ajax实例教程的学习,我想各位已经能够使用ajax技术进行简单的数据读取工作.
    2010-10-10
  • 如何通过axios发起Ajax请求(最新推荐)

    如何通过axios发起Ajax请求(最新推荐)

    Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下
    2022-11-11
  • AJAXCALL

    AJAXCALL

    AJAXCALL...
    2007-02-02

最新评论