表單陣列封裝成Json物件陣列
阿新 • • 發佈：2018-12-29
最近在搗鼓著Json與ajax結合傳遞資料到後臺。在這此前寫過Gson處理前端傳遞過來的Json物件陣列所以接著寫一下如何把表單陣列封裝成Json物件。
場景：需要把表格中的表單轉化為一個Json物件
我通過使用jQuery的相關方法實現表單資料的序列化，其中：
1.serialize( )方法是把表單內容序列化為一個字串
格式：var data =$(“#form”).serialize();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title 2.serialzeArray( )是把表單序列化為一個Json結構的物件，而不是我們所想要的Json字串
格式：var data=$(“#formId”).serializeArray( );
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$.fn.serializeObject=function(){
var json={};
var map=this.serializeArray();
$.each(map,function(){
if(json[this.name]){
if(!json[this.name].push){
json[this.name]=[json[this.name]];
}
json[this.name].push(this.value ||'');
}else{
json[this.name]=this.value||'';
}
});
return json;
};
function test(){
/*輸出：
[{"name":"username","value":"tony"},{"name":"age","value":"12"},{"name":"username","value":"tony"},{"name":"age","value":"12"}]
這個方法輸出的內容不是我們所想要的，所以我們要做寫js功能對多得到的結果進行改造，為此我添加了**serializeObject( )**
*/
var data=$("#formId").serializeArray();
var datastring=JSON.stringify(data);
alert(datastring);
/*改造後輸出：{"username":["tony","czt"],"age":["12","22"]}，當我們得到這樣的Json資料格式後，就可以傳遞給後臺了。後臺也可以根據這個Json解析，得到想要的資訊*/
var jsonuserinfo=$("#formId").serializeObject();
alert(JSON.stringify(jsonuserinfo));
};
</script>
</head>
<body>
<form action="" id="formId" method="post">
姓名：<input type="text" name="username" value="tony"/>
年齡：<input type="text" name="age" value="12"/><br>
姓名：<input type="text" name="username" value="czt"/>
年齡：<input type="text" name="age" value="22"/><br>
<input type="submit" onclick="test()" value="提交">
</form>
</body>
</html>
通過上述的辦法可以把表單封裝到Json中並傳遞給後臺。