`
niqingyang
  • 浏览: 44477 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery插件序列化表单为JSON对象

    博客分类:
  • YII
阅读更多
// 合并赋值
	function mergeSetValue(object, name, value, merge) {
		// 相同的name不进行替换,而是进行合并,合并成为一个数组
		if (merge == false) {
			object[name] = value;
		} else {
			// 相同的name不进行替换,而是进行合并,合并成为一个数组
			if (object[name]) {
				if ($.isArray(object[name])) {
					object[name].push(value);
				} else {
					object[name] = [object[name], value];
				}
			} else {
				object[name] = value;
			}
		}
	}

	// 解析变量
	function resolveVarName(object, name, value, merge) {
		// 识别是否符合格式:A[A][]、A[A]、A[A][A]
		// 不符合则当成字符串,符合则解析成对象
		if (new RegExp("^[a-zA-Z_][a-zA-Z0-9_]+((\\[[a-zA-Z0-9_]+\\]))*(\\[\\])?$").test(name)) {
			// 识别出[A]部分
			var subNames = name.match(new RegExp("\\[[a-zA-Z0-9_]+\\]", "g"));

			// 如果不包含“[”则直接赋值返回
			if (name.indexOf("[") < 0) {
				// 相同的name不进行替换,而是进行合并,合并成为一个数组
				mergeSetValue(object, name, value, merge);
				return object;
			}

			// 识别出变量名
			var var_name = name.substring(0, name.indexOf("["));

			if (object[var_name] == undefined) {
				object[var_name] = [];
			}

			// 设置临时变量
			var temp = object[var_name];

			for (i in subNames) {
				var subName = subNames[i];
				if (temp[subName] == undefined) {
					temp[subName] = [];
				}
				if (i == subNames.length - 1) {
					// 如果是以[]结尾则代表为数组
					if (new RegExp("\\[\\]$").test(name)) {
						temp[subName].push(value);
					} else {
						// 相同的name不进行替换,而是进行合并,合并成为一个数组
						mergeSetValue(temp, subName, value, merge);
					}
				}
				temp = temp[subName];
			}

			if (subNames == null || subNames.length == 0) {
				// 如果是以[]结尾则代表为数组
				if (new RegExp("\\[\\]$").test(name)) {
					object[var_name].push(value);
				} else {
					// 相同的name不进行替换,而是进行合并,合并成为一个数组
					mergeSetValue(object, var_name, value, merge);
				}
			}

			return object;
		} else {
			if (merge == false) {
				object[name] = value;
			} else {
				// 相同的name不进行替换,而是进行合并,合并成为一个数组
				mergeSetValue(object, name, value, merge);
			}
			return object;
		}
	}

	/**
	 * 将表单序列号为JSON对象
	 * 
	 * @param merge
	 *            相同name的元素是否进行合并,默认不进行合并,true-进行合并 false-不进行合并
	 */
	$.fn.serializeJson = function(merge) {

		if (merge == undefined || merge == null) {
			merge = false;
		}

		var serializeObj = {};
		var array = [];

		// 判断当前元素是否为input元素
		if ($(this).is(":input")) {
			array = $(this).serializeArray();
		} else {
			array = $(this).find(":input").serializeArray();
		}

		$(array).each(function() {
			resolveVarName(serializeObj, this.name, this.value, merge);
		});
		return serializeObj;
	};

 一般这样:

 

 也可以这样玩:



 

 

  • 大小: 24.6 KB
  • 大小: 10 KB
  • 大小: 31.5 KB
  • 大小: 7.2 KB
分享到:
评论

相关推荐

    将表单序列化为json对象

    本篇文章介绍了一个自定义的jQuery插件方法——`serializeJson`,该方法可以将表单中的所有字段序列化为一个JSON对象,极大地简化了获取和处理表单数据的过程。 **1. serializeJson方法实现** ```javascript $.fn....

    jQuery序列化form表单数据为JSON对象的实现方法

    本文将介绍如何利用jQuery序列化form表单数据为JSON对象的实现方法,并提供实例代码来加深理解。 在Web开发中,表单提交是一个常见的操作,通常需要把表单中的数据转换成适合网络传输的格式。HTML表单通过表单元素...

    将JavaScript的jQuery库中表单转化为JSON对象的方法

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。   我在网上看到有人用替换的方法,先用serialize序列化后,将&替换...

    json数据序列化和反序列化

    2. 数据序列化:序列化是将对象转换为可传输或存储的格式,对于JSON,这意味着将JavaScript对象转换为JSON字符串。在JavaScript中,我们可以使用`JSON.stringify()`方法实现这一过程。例如: ```javascript let obj ...

    jQuery实现form表单序列化转换为json对象功能示例

    jQuery提供了一个方便的方法来序列化表单数据,并将其转换为JSON对象,这在使用Ajax提交表单时特别有用。本文将通过一个示例来讲解如何使用jQuery实现这一功能。 首先,我们需要一个HTML表单,如下所示: ```html ...

    前端from表单序列化json插件依赖json2 jquery

    from表单序列化json插件 , 插件支持key-value数据的存储 one-many

    jQuery扩展将复杂form表单转成json对象

    在JavaScript开发中,jQuery库是广泛使用的工具,它简化了DOM操作、事件处理以及Ajax交互。在处理HTML表单(form)数据...通过自定义jQuery插件,我们可以根据需求定制化表单序列化的逻辑,以适应各种复杂的业务场景。

    jQuery实现form表单元素序列化为json对象的方法

    接下来,我们将创建一个空对象`o`来存储序列化的JSON数据: ```javascript var o = {}; ``` 然后,我们使用`jQuery.each()`遍历由`serializeArray()`返回的数组: ```javascript jQuery.each(fields, function(i,...

    jquery创建调查问卷代码 返回json序列

    总的来说,创建一个jQuery调查问卷系统涉及HTML布局、CSS美化、jQuery脚本编写,以及JSON序列化等技术。这样的系统不仅可以提供灵活的问卷设计,还能通过JSON格式的数据交换,方便地与后端服务器进行通信。通过实践...

    50个jquery插件介绍

    9. **表单序列化插件**:如serializeArray,将表单数据转换为JSON对象,方便Ajax提交。 10. **图库和画廊插件**:如Fancybox或Magnific Popup,可以创建全屏图像和媒体查看器。 此外,还有用于响应式设计、地图...

    JQuery扩展包-多种序列化方式

    Jquery自带的序列化,仅对form表单进行序列化,有很大的局限性,现在对齐进行扩展可以进行任意的序列化,包括json格式,字符串格式、数组格式,数组时自动转化为字符串等。并可以根据开发需要,随时扩展自己想要的...

    前台提交到controller序列化复杂对象

    在MVC框架中,当你在前端(例如,jQuery AJAX)提交表单或者POST请求时,可以利用JavaScriptSerializer将前端的复杂对象转换为JSON字符串。然后,这个JSON字符串可以通过HTTP请求发送到后台的Controller方法。在...

    基于jQuery的一个扩展form序列化到json对象

    为了在客户端以JSON格式序列化表单数据,以便与这种类结构相匹配,需要一种方法能够处理属性名中的嵌套关系。上述代码中的paramString2obj()函数就承担了这一角色。它通过将属性名分割为数组,并逐级地创建和赋值...

    jquery.json.min.2.3.0.js;json2.js

    jQuery库提供基础的DOM操作和事件处理,jQuery UI扩展了丰富的用户界面组件,而json2.js和jquery.json.min.2.3.0.js则处理JSON数据的序列化和反序列化,为与服务器交换数据提供便利。这些工具在开发高效、响应式的...

    jQuery将表单序列化成一个Object对象的实例

    总结来说,这个自定义的jQuery插件扩展了`serializeArray()`的功能,将序列化的表单数据转换为更易操作的对象形式,从而简化了表单数据的处理过程,提高了代码的可读性和可维护性。在实际开发中,这样的自定义扩展...

    jquery.serializeObject:创建表单元素的序列化表示

    总之,`jquery.serializeObject`是一个强大的jQuery插件,它将表单数据转换为JSON对象,方便在现代Web应用中进行数据管理、传输和存储。了解并熟练使用这样的工具,对于提升JavaScript编程技能和项目效率有着积极的...

Global site tag (gtag.js) - Google Analytics