您的位置:首页 > Web前端 > JQuery

jQuery ajax()使用serialize()提交数据

2017-07-17 17:47 197 查看
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化提交数据。

HTML

<form id = "myForm">
<input type = "text" id = "name" name = "name" value = "张三"/>
<input type = "checkbox" name = "hobby" value = "吃饭"/>吃饭 <br/>
<input type = "checkbox" name = "hobby" value = "睡觉"/>睡觉 <br/>
<input type = "checkbox" name = "hobby" value = "打豆豆"/>打豆豆 <br/>
..........
<input type = "hidden" id = "saveUrl" name = "saveUrl" value = "myAction.do">
</form>


JS

//提交Form表单所有的值
$.ajax({
url: $("#saveUrl").val() + "?" +$('input[name="hobby"]:checked').serialize(),
type:"post",
dataType:"json",
data:$('#myForm').serialize(),
success: function(data){
alert(13, data.message);
},
error: function(){
alert(21, "提交失败");
}
});

//单独提交选中的checkBox 和某些需要提交的数据
$.ajax({
//$('input[name="hobby"]:checked').serialize()的数据形式为  "hobby=吃饭&hobby=睡觉&hobby=打豆豆" ,所以我们可以直接拼在路径请求后面
url: $("#saveUrl").val() + "?" +$('input[name="hobby"]:checked').serialize(),
type: "post",
dataType: "json",
//          data: $('#myForm').serialize(),
data: {
name : $('#name').val() ,
.......
},
success: function(data){
alert(13, data.message);
},
error: function(){
alert(21, "提交失败");
}
});


JAVA

获取多个checkbox值
String[] hobbies = request.getParameterValues("hobby");
获取其他....
String name = request.getParameter("name");
.....
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery ajax serialize