基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對(duì)象
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
這個(gè)function對(duì)于普通的對(duì)象轉(zhuǎn)換是足夠的,但是如果出現(xiàn)對(duì)象內(nèi)部又包含子對(duì)象的情形就不能支持了。
例如我有這樣的一個(gè)form表單:
<form id="testform">
<input type="text" name="name" value="dummyName" id="name">
<input type="text" name="category.id" value="categoryId" id="name">
<input type="text" name="category.name" value="categoryName" id="name">
</form>
對(duì)應(yīng)到server端上的domain class是這樣的:
public class DummyProduct {
private DummyCategory category;
private String name;
public DummyCategory getCategory() {
return category;
}
public void setCategory(DummyCategory category) {
this.category = category;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class DummyCategory {
private String id;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
如果想把表單數(shù)據(jù)序列化成跟server端domain class匹配的json字符串,就可以使用我下面的這個(gè)擴(kuò)展
/** @serializedParams looks like "prop1=value1&prop2=value2".
Nested property like 'prop.subprop=value' is also supported **/
function paramString2obj (serializedParams) {
var obj={};
function evalThem (str) {
var attributeName = str.split("=")[0];
var attributeValue = str.split("=")[1];
if(!attributeValue){
return ;
}
var array = attributeName.split(".");
for (var i = 1; i < array.length; i++) {
var tmpArray = Array();
tmpArray.push("obj");
for (var j = 0; j < i; j++) {
tmpArray.push(array[j]);
};
var evalString = tmpArray.join(".");
// alert(evalString);
if(!eval(evalString)){
eval(evalString+"={};");
}
};
eval("obj."+attributeName+"='"+attributeValue+"';");
};
var properties = serializedParams.split("&");
for (var i = 0; i < properties.length; i++) {
evalThem(properties[i]);
};
return obj;
}
$.fn.form2json = function(){
var serializedParams = this.serialize();
var obj = paramString2obj(serializedParams);
return JSON.stringify(obj);
}
使用起來(lái)大概像這個(gè)樣子:
var json = $("#testform").form2json();
alert(json);
相關(guān)文章
ASP.NET jQuery 實(shí)例16 通過控件CustomValidator驗(yàn)證RadioButtonList
上一節(jié)已經(jīng)介紹過控件CustomValidator的使用方法,下面直接看代碼2012-02-02JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11學(xué)習(xí)使用jquery iScroll.js移動(dòng)端滾動(dòng)條插件
這篇文章主要為大家詳細(xì)介紹了jquery iScroll.js移動(dòng)端滾動(dòng)條插件的使用方法,以及iScroll.js使用注意事項(xiàng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jQuery 數(shù)據(jù)緩存data(name, value)詳解及實(shí)現(xiàn)
本文要討論的是最流行的JavaScript框架jQuery的數(shù)據(jù)緩存實(shí)現(xiàn)原理,這是jQuery1.2.3版開始加入的新功能。2010-01-01jQuery ajax dataType值為text json探索分享
ajax dataType值為text json的使用是怎么樣的,在本文將為大家想你想介紹下,感興趣的朋友不要錯(cuò)過2013-09-09jquery.tableSort.js表格排序插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery.tableSort.js表格排序插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery得到多個(gè)值只能用取Class ,不能用取ID的方法
下面小編就為大家?guī)?lái)一篇jQuery得到多個(gè)值只能用取Class ,不能用取ID的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-12-12