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两种扩展方法
在jQuery中，有两种扩展方法
1.类方法（$.extend()）
<script>
$.extend({
print1:function(name){ //print1是自己定义的函数名字，括号中的name是参数
console.log(name)
}
});
$.print1("坤") ; //调用时直接$.函数名(参数);
</script>
2.对象方法($.fn.extend())
<body>
<input type="text">
<script>
$.fn.extend({
getMax:function(a,b){
var result=a>b?a:b;
console.log(result);
}
});
$("input").getMax(1,2); //调用时要$(标签名).函数名();
</script>
</body>
3.一般情况下，jQuery的扩展方法写在自执行匿名函数中（原因：在js中是以函数为作用域的，在函数中写可以避免自己定义的函数或者变量与外部冲突）
<script>
(function(){
$.extent({
print1:function(){
console.log(123);
}
})
})();
</script>
总结
以上所述是小编给大家介绍的jQuery扩展方法实现Form表单与Json互相转换的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JS/jQuery实现获取时间的方法及常用类完整示例
本文实例讲述了JS jQuery实现获取时间的方法及常用类.分享给大家供大家参考,具体如下: 效果图 源码解析 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS获取时间的方法及常用类</title> <style type="text/css"> input{ color:red; min-width: 25
-
js jquery 获取某一元素到浏览器顶端的距离实现方法
如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod
-
浅谈JS和jQuery的区别
一.本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是一个JavaScript函数库.或者说是JavaScript. 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如: 库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度.另外一个好处是显而易见的,
-
用jQuery将JavaScript对象转换为querystring查询字符串的方法
在get方式的参数传递中,常常需要将JavaScript对象,转换成查询字符串,比如: { method: 'get', state: '200' } 会转换成 ?method=get&state=200 方法1:用JavaScript serialize = function(obj) { var str = []; for (var p in obj) if (obj.hasOwnProperty(p)) { str.push(encodeURIComponent(p) + "=&q
-
jQuery序列化form表单数据为JSON对象的实现方法
jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs
-
JS与jQuery判断文本框还剩多少字符可以输入的方法
本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法.分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function checkMaxInput(){ if($("summary").value.length>maxLen){ $("summary").value=$("summ
-
jquery.pagination.js分页使用教程
简单介绍一下在动态网页里面的jquery.pagination.js分页的使用,具体内容如下 添加下载的js和样式,主要是先添加jquery.js 再添加jquery.pagination.js,我这是下载好的,放在本地 <link rel="stylesheet" href="<%=path%>css/pagination.css" type="text/css"> <script type="text/
-
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_]+)\]
-
Ajax提交Form表单及文件上传的实例代码
前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f
-
jquery的ajax提交form表单的两种方法小结(推荐)
jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:
-
使用Ajax方法实现Form表单的提交及注意事项
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/
-
jquery获取form表单input元素值的简单实例
一般取值方法 $("#id").val(); $("#id").attr("value"); //其中value是元素的属性名如<s:textfield id="cifName" key="cifName" name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sav
-
浅谈jquery采用attr修改form表单enctype不起作用的问题
做文件上传,需要将表单元素的enctype设置为'multipart/form-data',用jquery的attr方法在目前较新的主流浏览器上测试均可成功,唯独IE下死活不行.后来查阅ie浏览器6,7,8(9+由于开发机为xp,未进行测试)不支持attr的方式来修改enctype属性,需要通过dom元素的原生方法来设置, 代码如下: $('#form1').get(0).encoding = 'multipart/form-data'; 以上这篇浅谈jquery采用attr修改form表单en
-
form表单转Json提交的方法(推荐)
先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":""},.....}] var formArray = $("#form").serializeArray(); 将formArray转换成Json格式 function arrayToJson(formArray){ var dataArray = {}; $.each(formArray,function(){ if(da
-
layui实现form表单同时提交数据和文件的代码
1.jsp页面 ·html代码 <%--用户注册的弹出框--%> <div id="userDiv" style="display: none;"> <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data"> <input t
-
Drupal7 form表单二次开发要点与实例
请记得收藏此文,在你进行Drupal 7 custom module时,经常会用到的form 表单的跳转或重载. 主要汇总三个要点: 1.页面提交后,经过#submit处理后,需要redirect 跳转到另外一个页面.2.url路径中存在destination参数时,页面直接跳转到destination所指的url,无法控制的问题.3.form表单如何实现multiple steps forms 多个步骤,或者表单提交后,如何在表单获取到提交上来的值. 一.Form 表单 redirect(跳转
-
EasyUI在表单提交之前进行验证的实例代码
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,EasyUi中form模块中的from('validate')方法会自行对我们指定的表单中required=true等需要验证的的元素进行验证,但有不通过的元素时返回一个false; $("#form").form({ url: 'login.ashx', onSubmit: function