JQuery扩展方法实现Form表单与Json互相转换
1.把表单转换出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;
};
2.将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互相转换
JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...
- 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 ...
随机推荐
- .NET+Sqlite如何支持加密
.NET+Sqlite如何支持加密 Sqlite SQLite 来源于公共领域 SQLite Is Public Domain. 确保代码不会受到任何专有或许可内容的污染,没有任何来自互联网上的未知来 ...
- 【】JSON介绍
0.说明 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. 同时也易于机器解析和生成. 它是基于JavaScript Programm ...
- .net core的配置介绍(三):Options
前两篇介绍的都是已IConfiguration为基础的配置,这里在说说.net core提供的一种全新的辅助配置机制:Options. Options,翻译成中文就是选项,可选择的意思,它依赖于.ne ...
- js 简单版发布留言 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- wordpress搭建网站更改域名后打开网页排版显示错乱解决办法
发生的原因: 我本来已经搭建好了网站,也测试了没问题.后来更改了网站的域名,出现了这种情况. 解决办法: 需要修改数据库的options表里面的 siteurl 和 home 这两个表的内容为最新的域 ...
- PPT2010制作清明上河图动画
原文: https://www.toutiao.com/i6492312556915393038/ 新建一个空白幻灯片 选择"插入"选项卡,"图像"功能组,&q ...
- Java 在PDF中添加工具提示|ToolTip
本文,将介绍如何通过Java后端程序代码在PDF中创建工具提示.添加工具提示后,当鼠标悬停在页面上的元素时,将显示工具提示内容. 导入jar包 本次程序中使用的是 Free Spire.PDF for ...
- 一站式搭建 GitHub Pages 博客 (一)
本文将详细讲解如何快速搭建 GitHub Pages 博客页面 关于博客主题,博客信息更改,上传文章等将会在 一站式搭建 GitHub Pages 博客 (二) 中进行详细讲解 准备阶段 注册 Git ...
- python2.7发送邮件失败之——邮箱安全问题
使用python2.7发送邮件,通过脚本调试,脚本运行通过成功发出了邮件,但是目标邮箱qq没有收到. 刚开始怀疑脚本问题,上网查找资料后,发现邮箱发送成功后目标邮件没有收到有可能有以下几种原因: 1. ...
- MongDB日志分析
Result文件数据说明: Ip:106.39.41.166,(城市) Date:10/Nov/2016:00:01:02 +0800,(日期) Day:10,(天数) Traffic: 54 ,(流 ...