JQuery笔记
记两段代码，使用JQuery实现从表单获取json与后端交互，以及把后端返回的json映射到表单相应的字段上。
把表单转换出json对象
rush:js;">
//把表单转换出json对象
$.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({},merge);
}
}
json = $.extend(true,json,merge);
});
return json;
};
将josn对象赋值给form，使表单控件也显示相应的状态
rush:js;">
//将josn对象赋值给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);
}
});
}
}
}
补充：下面看下jQuery两种扩展方法
在jQuery中，有两种扩展方法
1.类方法（$.extend()）
rush:js;">
2.对象方法($.fn.extend())
rush:js;">
$.fn.extend({
getMax:function(a,b){
var result=a>b?a:b;
console.log(result);
}
});
$("input").getMax(1,2); //调用时要$(标签名).函数名();
3.一般情况下，jQuery的扩展方法写在自执行匿名函数中（原因：在js中是以函数为作用域的，在函数中写可以避免自己定义的函数或者变量与外部冲突）
rush:js;">
总结
以上所述是小编给大家介绍的jQuery扩展方法实现Form表单与Json互相转换的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
