(笔记)JQuery扩展方法实现Form表单与Json互相转换
JQuery笔记
记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上。
把表单转换出json对象
//把表单转换出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({}, k, merge);
}
}
json = $.extend(true, json, merge);
});
return json;
};
将josn对象赋值给form,使表单控件也显示相应的状态
//将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扩展方法实现Form表单与Json互相转换的更多相关文章
- JQuery扩展方法实现Form表单与Json互相转换
1.把表单转换出json对象 //把表单转换出json对象 $.fn.toJson = function () { var self = this, json = {}, push_counters ...
- form表单转化json对象
利用 $.fn 可以让每一个jquery 对象都能直接使用这个方法. //form表单转化json对象$.fn.serializeObject = function () { var o = {}; ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- form表单转换为Json字符串数据
https://github.com/marioizquierdo/jquery.serializeJSON 效果图 加载使用 <script type="text/javascrip ...
- jquery实现ajax提交form表单的方法总结(转)
方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
随机推荐
- [mybatis]Mapper XML 文件——statementType
statementType:STATEMENT,PREPARED 或 CALLABLE(存储过程) 的一个.这会让 MyBatis 分别使用 Statement,PreparedStatement 或 ...
- python中如何剔除字符串
问题: 过滤用户输入中前后多余的空白字符 ‘ ++++abc123--- ‘ 过滤某windows下编辑文本中的’\r’: ‘hello world \r\n’ 去掉文本中unicode组 ...
- Dev-C++添加代码格式化(format source code)工具Artistic Style
Dev-C++是一个轻便的C++ IDE开发环境,比起VS2010来轻巧得多.最新的版本是5.4.0是2013年2月14日发布的,下载地址如下: Dev-C++5.4.0 download 它是开源项 ...
- BZOJ 1005 [HNOI2008]明明的烦恼 ★(Prufer数列)
题意 N个点,有些点有度数限制,问这些点可以构成几棵不同的树. 思路 [Prufer数列] Prufer数列是无根树的一种数列.在组合数学中,Prufer数列是由一个对于顶点标过号的树转化来的数列,点 ...
- 【Python】装饰器理解
以下文章转载自:点这里 关于装饰器相关的帖子记录在这里: 廖雪峰, thy专栏, stackflow Python的函数是对象 简单的例子: def shout(word="yes" ...
- 【转】Fork/Join框架测试
Fork/Join框架介绍 下面使用该框架计算0-50000000000的和,并比较普通计算方法.Fork/Join框架.Java8新特性三种计算方式的计算时间: import java.time.D ...
- JDK的多线程与并发库
1.创建多线程 public class MultiThread { public static void main(String[] args) { // 通过继承Thread类 Thread th ...
- 八、dbms_rls(实现精细访问控制)
1.概述 本报只适用于Oracle Enterprise Edition,它用于实现精细访问控制,并且精细访问控制是通过在SQL语句中动态增加谓词(WHERE子句)来实现的.通过使用ORACLE的精细 ...
- Partition 1 does not start on physical sector boundary.分区信息不正常
[root@v1 ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda2 20G 3.3G 16G ...
- LeetCode OJ:Add and Search Word - Data structure design(增加以及搜索单词)
Design a data structure that supports the following two operations: void addWord(word) bool search(w ...