直接使用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 是一个常用的 JavaScript 库,它提供了许多便利的功能,简化了 DOM 操作、事件处理和Ajax交互等。在这个特定的场景中,我们需要实现一个功能,即在用户尝试删除数据前,判断他们是否至少选中了...
而jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。本案例主要涉及了如何在JSP页面中使用复选框(checkbox)收集用户的选择,并通过jQuery进行数据处理。 首先,复选框在HTML...
12. 复选按钮:<input type="checkbox"> 属性:name、value、checked 13. 下拉列表:<select> 属性:name、value CSS 基础知识点: 1. CSS 选择器:标签选择器、类选择器、ID 选择器 2. CSS 属性:color、...
jQuery提供了一个方便的方法来序列化表单数据,并将其转换为JSON对象,这在使用Ajax提交表单时特别有用。本文将通过一个示例来讲解如何使用jQuery实现这一功能。 首先,我们需要一个HTML表单,如下所示: ```html ...
在提供的代码片段中,`DeleteByIds`函数展示了如何使用`toJSON`函数将由`CheckBox.GetCheckedIds()`返回的数组转换为JSON对象,然后通过Ajax请求发送到服务器进行删除操作。这表明,在实际开发中,将数据转换为JSON...
2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext.Array.each()用于遍历数组,Ext.Array.indexOf()查找元素的索引。 3. **Number 类**:增强了JavaScript的数字处理,提供了如Ext....
2. **Array类**:扩展了JavaScript内置的Array对象,添加了一些实用的方法,如`indexOf`、`each`和`removeAt`,方便数组操作。 3. **Number类**:增强JavaScript的Number对象,提供如`format`等方法,用于数字格式...
{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}数组...
- **概述**:提供了类似于jQuery的选择器功能。 - **常用方法**: - `Ext.DomQuery.select(selector)`: 选择符合指定条件的DOM元素。 - `Ext.DomQuery.selectNode(node, selector)`: 在指定节点下选择符合指定条件...
- 单选和多选可通过 `<input type="radio">` 和 `<input type="checkbox">` 实现。 - 下拉菜单的多选选项通过 `<select multiple>` 实现。 #### JSON使用 **问题:**有没有用过JSON?数据结构? **解析:**JSON...