`

jquery ajax array checkbox action

阅读更多
直接使用jquery的$.ajax()异步提交时,如果data中含有Array(如提交checkbox时),action不能直接使用List接收array。

html:
<input type="checkbox" name="id" value="1">
<input type="checkbox" name="id" value="2">
<input type="checkbox" name="id" value="13">
<input type="checkbox" name="id" value="14">

js:
$("input[type='checkbox'][name='id']:checked").each(function(){
id.push($(this).val());

});
$.ajax({
type:"post",
url:"teacherDisable.action",
dataType:"json",
success:function(data){
if(data.success == true){
alert(data.message);
window.location.reload();
}else{
alert(data.message);
}
},
data:{id:id}
});
浏览器显示提交数据:
参数application/x-www-form-urlencoded
id[] 13
id[] 14
源代码
id%5B%5D=13&id%5B%5D=14
但是后台接收变量List<Integer>  id为空

解决方案
1:data:{id:id}改为data:$.param({id:id},true),对参数进行序列化
2:改变js接收id的方法,将id转化为字符串
$("input[type='checkbox'][name='id']:checked").each(function(){
id += "id=" + $(this).val() + "&";
});
3:改变html中checkbox的name
<input type="checkbox" name="id[0]" value="1">
<input type="checkbox" name="id[1]" value="2">
<input type="checkbox" name="id[2]" value="13">
<input type="checkbox" name="id[3]" value="14">

$.ajax()改为简洁的$.post():
$.post("teacherDisable.action",$("input[type='checkbox']:checked"),function(data){
if(data.success == true){
alert(data.message);
window.location.reload();
}else{
alert(data.message);
}
});

三种方法都可以使action通过set()方法获取参数,第一种最为方便,对参数进行序列化即可,第二种方法比较简陋,将checkbox的值拼装为字符串,第三种需要更改html中checkbox的name,而且如果只选中id[3],那么后台得到的是一个长度为4的List,其中0~2为null,只有第三个有值
分享到:
评论

相关推荐

    jquery复选框checkbox实现删除前判断

    在网页开发中,jQuery 是一个常用的 JavaScript 库,它提供了许多便利的功能,简化了 DOM 操作、事件处理和Ajax交互等。在这个特定的场景中,我们需要实现一个功能,即在用户尝试删除数据前,判断他们是否至少选中了...

    jsp 复选框传值

    而jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。本案例主要涉及了如何在JSP页面中使用复选框(checkbox)收集用户的选择,并通过jQuery进行数据处理。 首先,复选框在HTML...

    java web前端.docx

    12. 复选按钮:&lt;input type="checkbox"&gt; 属性:name、value、checked 13. 下拉列表:&lt;select&gt; 属性:name、value CSS 基础知识点: 1. CSS 选择器:标签选择器、类选择器、ID 选择器 2. CSS 属性:color、...

    jQuery实现form表单序列化转换为json对象功能示例

    jQuery提供了一个方便的方法来序列化表单数据,并将其转换为JSON对象,这在使用Ajax提交表单时特别有用。本文将通过一个示例来讲解如何使用jQuery实现这一功能。 首先,我们需要一个HTML表单,如下所示: ```html ...

    将数组转换成JSON对象

    在提供的代码片段中,`DeleteByIds`函数展示了如何使用`toJSON`函数将由`CheckBox.GetCheckedIds()`返回的数组转换为JSON对象,然后通过Ajax请求发送到服务器进行删除操作。这表明,在实际开发中,将数据转换为JSON...

    EXTJS___API详解

    2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext.Array.each()用于遍历数组,Ext.Array.indexOf()查找元素的索引。 3. **Number 类**:增强了JavaScript的数字处理,提供了如Ext....

    EXT核心API详解.doc

    2. **Array类**:扩展了JavaScript内置的Array对象,添加了一些实用的方法,如`indexOf`、`each`和`removeAt`,方便数组操作。 3. **Number类**:增强JavaScript的Number对象,提供如`format`等方法,用于数字格式...

    Java学习笔记-个人整理的

    {1.10}数组(array)}{34}{section.1.10} {1.10.1}数组变量的声明}{34}{subsection.1.10.1} {1.10.2}数组变量的初始化}{34}{subsection.1.10.2} {1.10.3}数组对象的引用}{35}{subsection.1.10.3} {1.10.4}数组...

    extjs帮助文档pdf版

    - **概述**:提供了类似于jQuery的选择器功能。 - **常用方法**: - `Ext.DomQuery.select(selector)`: 选择符合指定条件的DOM元素。 - `Ext.DomQuery.selectNode(node, selector)`: 在指定节点下选择符合指定条件...

    php程序员面试题(含html、JavaScript、php和mysql)

    - 单选和多选可通过 `&lt;input type="radio"&gt;` 和 `&lt;input type="checkbox"&gt;` 实现。 - 下拉菜单的多选选项通过 `&lt;select multiple&gt;` 实现。 #### JSON使用 **问题:**有没有用过JSON?数据结构? **解析:**JSON...

Global site tag (gtag.js) - Google Analytics