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

jQuery实现form表单元素序列化为json对象的方法

2015-12-09 11:45 1076 查看

这段代码序列化form表单元素为json对象：

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>jQuery扩展――form序列化到json对象</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<p id="results"><b>Results:</b> </p>
<form>
<select name="aModel.single">
<option>Single</option>
<option selected>Single2</option>
</select>
<br/><br/>
<select name="aModel.multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/><br/>
<input type="checkbox" name="aModel.check" value="check1"/> check1
<input type="checkbox" name="aModel.check" value="check2" checked="checked"/> check2
<br/><br/>
<input type="radio" name="aModel.radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="aModel.radio" value="radio2"/> radio2
</form>
<script type="text/javascript">
var fields = $("select, :radio").serializeArray();
var o={};
jQuery.each(fields, function(i, fields){
if(o[this.name]){
/*
表单中可能有多个相同标签，比如有多个label，
那么你在json对象o中插入第一个label后，还要继续插入，
那么这时候o[label]在o中就已经存在，所以你要把o[label]做嵌套数组处理
*/
//如果o[label]不是嵌套在数组中
if(!o[this.name].push){
o[this.name]=[o[this.name]];  // 将o[label]初始为嵌套数组，如o={a,[a,b,c]}
}
o[this.name].push(this.value || ''); // 将值插入o[label]
}else{
o[this.name]=this.value || '';  // 第一次在o中插入o[label]
}
});
$("#results").append(JSON.stringify(o));
console.log(o); //用FireBug输出
</script>
</body>
</html>

结果如下图所示：

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery form 序列化

相关文章推荐

新的分享

章节导航