JQuery筆記
為故城等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及故城網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、故城網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
記兩段代碼，使用JQuery實(shí)現(xiàn)從表單獲取json與后端交互，以及把后端返回的json映射到表單相應(yīng)的字段上。
把表單轉(zhuǎn)換出json對(duì)象
重慶分公司
重慶分公司
//把表單轉(zhuǎn)換出json對(duì)象
$.fn.toJson = function () {
var self = this,
json = {},
push_counters = {},
patterns = {
"validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
"key": /[a-zA-Z0-9_]+|(?=\[\])/g,
"push": /^$/,
"fixed": /^\d+$/,
"named": /^[a-zA-Z0-9_]+$/
};
this.build = function (base, key, value) {
base[key] = value;
return base;
};
this.push_counter = function (key) {
if (push_counters[key] === undefined) {
push_counters[key] = 0;
}
return push_counters[key]++;
};
$.each($(this).serializeArray(), function () {
// skip invalid keys
if (!patterns.validate.test(this.name)) {
return;
}
var k,
keys = this.name.match(patterns.key),
merge = this.value,
reverse_key = this.name;
while ((k = keys.pop()) !== undefined) {
// adjust reverse_key
reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
// push
if (k.match(patterns.push)) {
merge = self.build([], self.push_counter(reverse_key), merge);
}
// fixed
else if (k.match(patterns.fixed)) {
merge = self.build([], k, merge);
}
// named
else if (k.match(patterns.named)) {
merge = self.build({}, k, merge);
}
}
json = $.extend(true, json, merge);
});
return json;
};將josn對(duì)象賦值給form，使表單控件也顯示相應(yīng)的狀態(tài)
//將josn對(duì)象賦值給form
$.fn.loadData = function (obj) {
var key, value, tagName, type, arr;
this.reset();
for (var x in obj) {
if (obj.hasOwnProperty(x)) {
key = x;
value = obj[x];
this.find("[name='" + key + "'],[name='" + key + "[]']").each(function () {
tagName = $(this)[0].tagName.toUpperCase();
type = $(this).attr('type');
if (tagName == 'INPUT') {
if (type == 'radio') {
if ($(this).val() == value) {
$(this).attr('checked', true);
}
} else if (type == 'checkbox') {
arr = value.split(',');
for (var i = 0; i < arr.length; i++) {
if ($(this).val() == arr[i]) {
$(this).attr('checked', true);
break;
}
}
} else {
$(this).val(value);
}
} else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
$(this).val(value);
}
});
}
}
}補(bǔ)充：下面看下jQuery兩種擴(kuò)展方法
在jQuery中，有兩種擴(kuò)展方法
1.類方法（$.extend()）
2.對(duì)象方法($.fn.extend())
3.一般情況下，jQuery的擴(kuò)展方法寫在自執(zhí)行匿名函數(shù)中（原因：在js中是以函數(shù)為作用域的，在函數(shù)中寫可以避免自己定義的函數(shù)或者變量與外部沖突）
總結(jié)
以上所述是小編給大家介紹的jQuery擴(kuò)展方法實(shí)現(xiàn)Form表單與Json互相轉(zhuǎn)換的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
