JQuery扩展方法实现Form表单与Json互相转换
Posted fireicesion
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解
jQuery插件:Ajax将Json数据自动绑定到Form表单