`
rikugun
  • 浏览: 351090 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jquery 表单转json 插件

    博客分类:
  • Js
阅读更多
//Author:rikugun
jQuery.fn.extend({
	fillForm:function(options){
		var settings = jQuery.extend({
			prefix:'' //表单项name前缀
			,data:{} //数据默认值
		},options);
	this.each(function(){
		var that =jQuery(this);
		if(jQuery.inArray(that.attr('tagName').toLowerCase(),['input','select','radio','textarea'])>-1){
			that.val(settings.data[that.attr('name')]);
		}else{
			for(var item in settings.data){
				try{
					that.find('[name=\''+settings.prefix+item+'\']').val(settings.data[item]);
				}catch(e){
					if(window.console){
						console.error('未能获取元素:'+settings.prefix+item);
					}
				}
			}
		}
	});
	}
	,getForm:function(options){
		var settings = jQuery.extend({
			prefix:'' //表单项name前缀
			,data:{} //数据默认值
		},options);
		var ret =[];
		var forms = this;
		if(this.attr('tagName').toLowerCase()!=='form'){
			forms = this.find('form');
		}
		forms.each(function(){
			var that =jQuery(this);
			var o ={};
			that.find('input,select,radio,textarea').each(function(){
				var el = jQuery(this);
				var fieldFullName = el.attr('name');
				var fieldName =fieldFullName.replace(settings.prefix,'');
				if(settings.data[fieldName]){
					o[fieldName] =settings.data[fieldName];
					return;
				}
				if(settings.prefix && fieldFullName.indexOf(settings.prefix)<0 ){
					//不符合前缀或已设置默认值
					return;
				}
				o[fieldName] = el.val();
			});
			ret.push(o);
		});
		if(ret.length === 1)return ret[0];
		return ret;
	}
});

//usage:
$('#form_mobile_model').fillForm({
					prefix:'model__',
					data:{
               'name':'aa',
               'newName':'bb'
});

var m = $('#form_mobile_model').getForm({
			prefix:'model__'
		});
//m ={'name':'aa','newName':'bb'}
0
1
分享到:
评论
3 楼 jy1245626 2010-04-02  
rikugun 写道
jy1245626 写道
提个建议

可以增加一个table2json的功能,这样的话,这个插件就比较完备。

table样式千变万化,不好弄噢.有什么建议么


再怎么个千变万化也是由规律的嘛,
首先,肯定是有标题头的<th>,就从th标签上找规律,每个th设置一个id
将这个id设置为key每行的td的值设置为value
这样的话每行就是一个对象{key:value,key2:value2。。。}整个表格就是一个array。
2 楼 rikugun 2010-03-17  
jy1245626 写道
提个建议

可以增加一个table2json的功能,这样的话,这个插件就比较完备。

table样式千变万化,不好弄噢.有什么建议么
1 楼 jy1245626 2010-03-16  
提个建议

可以增加一个table2json的功能,这样的话,这个插件就比较完备。

相关推荐

    jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.

    在jQuery的json插件中,可能存在一个类似的方法,如`$.toJSON()`,这在早期的jQuery版本中是很有用的,因为那时原生的`JSON.stringify`方法在某些浏览器中尚未支持。 2. **JSON字符串到JavaScript对象的解析**:...

    jquery form表单美化插件

    今天我们将深入探讨的是一个关于jQuery的实用工具——"jquery form表单美化插件"。这个插件专门用于提升网页表单的用户体验和视觉效果,使原本平淡无奇的HTML表单变得更具吸引力。 首先,我们要理解jQuery Form插件...

    表单转JSONform2js.zip

    form2js 是一个用来将 HTML 表单转成 JSON 对象的 jQuery 插件。例如这样的表单:&lt;input type="text" name="person.name.first" value="John" /&gt; &lt;input type="text" name="person.name.last" value...

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

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

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

    在标题和描述提到的场景中,我们需要创建一个jQuery扩展,将复杂的form表单数据转换为JSON对象。这通常涉及到遍历表单元素,获取它们的值,并构建JSON对象。以下是一个简单的示例: ```javascript (function($) { ...

    html对应的文件中 将form 表单数据 转化为json 格式

    jQuery提供了一个方便的插件,叫做`serializeJSON`,它能够将表单数据序列化为JSON对象。首先,确保在项目中引入了jQuery库和`serializeJSON.js`插件: ```html &lt;script src="https://code.jquery....

    Jquery的表单插件

    **jQuery表单插件详解** 在Web开发中,jQuery库以其简洁、强大的API深受开发者喜爱。其中,jQuery的表单插件是实现交互性、增强用户体验的重要工具。本篇文章将深入探讨jQuery的表单插件,特别是针对"jquery.form....

    jQuery表单验证大全

    《jQuery表单验证详解》 在Web开发中,表单验证是不可或缺的一部分,它能确保用户输入的数据符合预设的规则,从而保护服务器免受不合法数据的影响,提高用户体验。jQuery,作为一款广泛使用的JavaScript库,提供了...

    jQuery常用插件之表单插件form使用笔记

    本文将聚焦于jQuery中的一个特定插件——表单插件`form`,来探讨如何利用它来增强网页表单的功能和用户体验。 表单插件`form`是jQuery的一个扩展,主要用于处理表单数据的提交与验证。它提供了异步提交表单的能力,...

    Struts2+jQuery(不用JSON)实现局部刷新

    - **Struts2的JSON插件**:虽然题目要求不使用JSON,但通常情况下,Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过,我们可以通过设置Content-Type为"text/plain"或"text/html",让Struts2返回非JSON...

    jquery json饼图插件

    4. **与其他jQuery插件结合**:如与表单插件配合,实时获取用户输入并生成饼图。 ### 结语 jQuery JSON饼图插件为开发者提供了一个快速构建饼图的解决方案,尤其适合初学者和需要快速原型开发的项目。利用其灵活性...

    使用jQuery.form插件,实现完美的表单异步提交

    jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...

    jquery表单验证插件

    **jQuery 表单验证插件详解** 在网页开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,防止错误数据的提交,提高用户体验。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作,使得...

    json-editor:一个将JSON模式转换为表单的jquery插件

    它仅取决于jQuery。 可以在拖曳模式下使用:属性网格(当前实现)/常规形式(路线图)。 易于自定义CSS。 支持的输入:text / checkbox / textarea / html / color / date / number / radio / select。 验证...

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

    这些文件主要涉及jQuery库及其相关的扩展插件,以及JSON处理的相关功能。让我们详细探讨一下每个文件及其在IT领域的应用。 1. **jquery-1.4.2.min.js**:这是jQuery库的一个较早版本(1.4.2)。jQuery是一个广泛...

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    通过json数据辅助动态填充表单的jquery插件jquery.formfill.js.zip

    3. **调用插件方法**:将表单元素和JSON数据传入`jquery.formfill.js`插件的函数,如`$("#myForm").formfill(jsonData)`。 4. **自动填充**:插件会遍历JSON数据中的每个键值对,并查找表单中与键(key)匹配的输入...

    Jquery表单验证插件–Validform

    **jQuery表单验证插件Validform详解** 在Web开发中,表单验证是必不可少的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。Validform是一款基于jQuery的轻量级表单验证插件,...

    最新实用的Validate通用表单验证Jquery插件

    【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具,专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程,使得用户输入的数据在提交前就能得到有效的检查,从而...

Global site tag (gtag.js) - Google Analytics