1.JavaScript提交表单数据（包括数组），复选框问题 2.JavaScript+c标签遍历ajax数据与request作用域数据

1.

需求：添加一个学生（Student）
问题：学生标签复选框为多选，但在获取复选框值的时候，传输的数据只是最后一个选中的复选框的value值
解决方法：JavaScript手动提交表单
entity

@Data
@AllArgsConstructor
@NoArgsConstructor
@Table(name = "cm_student")
public class Student {
private String id;
private String name;
private Integer age;
private String remark; //描述
private Group group; //组别
private City city; //毕业城市
private Clazz clazz; //班级
private List<Label> labels; //学生标签
}

JSP

<form action="${pageContext.request.contextPath}/XXX" method="post">
学生名称:<input type="text" name="name"/><br/>
学生年龄:<input type="text" name="age"/><br/>
学生班级:
<select id="class" name="clazz.id" onchange="gr()">
</select><br/>
学生分组:
<select id="group" name="group.id">
</select><br/>
学生就业城市:
<select id="city" name="city.id">
</select><br/>
学生标签:
<yy id="label">
<input type="checkbox" value="XXX">学霸
<input type="checkbox" value="XXX">学神
<in
2c823
put type="checkbox" value="XXX">学渣
</yy><<br>
学生备注：
<textarea name="remark" style="width:288px;height:172px;">
</textarea><br/>

<input type="button" value="提交" onclick="sub()"/>
<input type="button" value="返回上级" onclick="history.go(-1);"/>
</form>

JavaScript

1. 获取选中的复选框，创建一个数组存放选中复选框的value属性
2. 获取form表单的数据
3. 更改表单数据
4. 提交表单

function sub() {
var sel = $('input:checkbox:checked'); //获取复选框选中的标签对象
var ls = new Array(); 				//创建js数组对象ls
var i=0;
$.each(sel,function () { 			//遍历选中的复选框，取标签的value值放入数组ls中
ls[i]=$(this).val();
i++;
})

var data = {};

var t = $('form').serializeArray();  //获取form表单中的数据，返回值为键值对数组
$.each(t, function() {				//遍历数据数组，更改键 ls[] 对应的值
if(this.name=='ls[]'){
data ['ls[]'] = ls;
}else {
data [this.name] = this.value;
}
});
$.ajax({
url:"${pageContext.request.contextPath}/XXX",
data:data,
type:'post',
success:function (d) {
location.href="${pageContext.request.contextPath}/XXX";
}
})

}

2

需求：做多个复选框回显
解决：使用for循环遍历ajax数据，嵌套c标签遍历request作用域的数据

$(function () {
$.ajax({
url:'${pageContext.request.contextPath}/XXX',
type:'post',
dataType:'JSON',
success:function (data) {

for (var i=0;i<data.labels.length;i++){

var option = null;

<c:forEach items="${requestScope.s.labels}" var="s">

if(data.labels[i].id=="${s.id}"){
option = $("<input type='checkbox' checked name='ls[]' value='"+data.labels[i].id+"'><ss>"+data.labels[i].name+"</ss>");
}else{
option = $("<input type='checkbox' name='ls[]' value='"+data.labels[i].id+"'><ss>"+data.labels[i].name+"</ss>");
}

</c:forEach>

$('#label').append(option);
}
}
})
})