`
LoveLZY
  • 浏览: 57485 次
  • 性别: Icon_minigender_1
博客专栏
Group-logo
从零编写RPC框架
浏览量:0
社区版块
存档分类
最新评论

jQuery基于json对象自动给表单元素赋值

    博客分类:
  • js
阅读更多
为了提高前端小伙伴的开发效率,造了个基于json对象根据表单元素的name属性自动赋值的轮子
 json2form:function(obj){
			 var nodeParent = null;
		 	var value = undefined;
		 	var $el = null;
		 	var nodeName = "";
		     for(var i in obj){
	      		value= obj[i] ;
	            if(value === undefined || value===null){
	                continue;
	            }
		        if(typeof value == 'object'){
		            nodeParent=obj.nodeParent;
		            value.nodeParent=nodeParent?nodeParent+"."+i : i;
					if(value instanceof Array){
						for(var mm=0;mm<value.length;mm++){
							var ms=value[mm];
							if(typeof ms == 'object'){
								nodeParent=ms.nodeParent;
								ms.nodeParent=ms.nodeParent?ms.nodeParent+"."+i+"["+mm+"]":i+"["+mm+"]";
								arguments.callee(ms);
							}

						}

						$el=$("[name='"+i+"']");
						if($el.is(":checkbox")){
							$el.each(function(){
								if($(this).val() == value){
									$(this).prop("checked",true);
								}
							})
						}
						else if($el.is(":radio")){
							$el.each(function(){
								if($(this).val() == value){
									$(this).prop("checked",true);
								}
							})
						}
					}else{  //递归
						arguments.callee(value);
					}
				}
		        else{
		            nodeName=obj.nodeParent?obj.nodeParent+"."+i : i ;

		            $el=$("[name='"+nodeName+"']");
		            if($el.length > 0){
		            // console.log("匹配数据名称:"+nodeName+"值:"+value);
		                if($el.is(":text")||$el.attr("type")=="hidden"){
		                	if($el.data("money") && $el.data("money") == "money"){
		                		value = outputdollars(value);
		                	}
		                    $el.val(value);
		                      
		               }else if($el.is(":radio")){
		                   $el.each(function(){
		                      if($(this).val()==value){
		                          $(this).prop("checked",true);
		                      }
		                   })
		               }
		               else if($el.is("select")){
		                  $el.find("option").filter(function(){return $(this).val() == obj[i];}).prop("selected",true);
		               }else if($el.is("textarea")){
		                  $el.val(value)
		               }
		            }
		        }
		    }	 
			 
		 }


注意: 表单的name属于与json对象的属性名为一致,保持继承链。例如 input name='a.b.c'   表示json对象里面的a属性里面的b属性的c属性。
分享到:
评论

相关推荐

    将表单序列化为json对象

    // 使用serializeArray方法获取表单元素的名称和值 // 遍历获取到的数组 $(array).each(function() { if (serializeObj[this.name]) { // 如果当前字段名已存在于serializeObj对象中 if ($.isArray...

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

    总结起来,通过上述步骤,我们可以使用jQuery将HTML表单元素序列化为JSON对象,这在与服务器进行数据交互时非常有用。这个过程包括了选择表单元素、序列化为数组、处理同名元素以及将数据结构转换为JSON格式。这个...

    jQuery实现动态给table赋值的方法示例

    然后,我们使用jQuery的`find()`方法找到新行中的每个单元格(id分别为"id"、"url"和"title"),并使用`text()`方法将JSON对象的相应属性值赋给它们。最后,我们使用`appendTo()`方法将新创建的行添加到表格的tbody...

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

    在给出的代码示例中,通过$.fn.serializeJson和$.fn.serializeObject两个自定义的jQuery插件方法,演示了如何将表单数据转换为JSON对象。这两个函数通过遍历表单内所有控件,并根据控件类型处理name和value,最终...

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

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

    struts2+json+jquery实现ajax登录和注册功能

    在用户提交表单后,jQuery将数据序列化为JSON格式发送给服务器,同时监听服务器的JSON响应,根据返回的信息更新页面状态或显示错误提示。 5. **异常处理与提示**:在Action中定义message变量,用于存储操作结果或...

    通过构造AJAX参数实现表单元素JSON相互转换

    当需要将JSON数据填充到表单元素中时,可以通过AJAX获取JSON数据,然后遍历JSON对象,为表单中的对应元素赋值。例如: ```javascript $.getJSON('url_to_file', function(data) { for (var i in data) { $('...

    Jquery 组合form元素为json格式,asp.net反序列化

    用表单元素class属性可以针对性地组合JSON数据。 2、后端ASP.NET用JavaScriptSerializer反序列化为对象实列。 3、好处:简化了前端数据读取与后端数据赋值。 代码如下:function GetJSONStr(class_name) { var a = []...

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

    然而,jQuery作为一个广泛使用的JavaScript库,并没有直接提供将表单序列化为JSON对象的内置方法。尽管如此,开发者社区已经提出了解决方案,使得我们可以借助现有的方法实现这一功能。 首先,来看一下jQuery的...

    javascript表单域与json数据间的交互第2 3页.docx

    - 创建一个空的JSON对象,并将每个表单元素的`name`属性作为键,其值作为对应的值。 3. **特殊处理**: - 处理复选框和多选下拉列表时,需要将其值组织为数组形式。 - 对于没有`name`属性的元素,可以考虑忽略...

    jquery模型驱动插件

    2. **配置模型**:创建一个 JSON 对象来定义模型,包括各个字段及其对应的 DOM 元素。例如: ```javascript var viewModel = { name: $('#nameInput'), age: $('#ageInput') }; ``` 3. **初始化插件**:在...

    form表单转Json提交的方法(推荐)

    在jQuery中,`$("#form").serializeArray()`方法可以将表单中的所有元素转换为一个数组,其中每个元素都是一个对象,包含`name`和`value`属性。这个数组的结构类似于: ```javascript [ { "name": "element1Name...

    Yii2基于Ajax自动获取表单数据的方法

    服务器响应的数据被解析为JSON对象,然后将其`city`和`province`属性赋值给对应的表单字段。 使用Ajax和jQuery,我们可以实现用户在选择邮政编码后实时更新城市和省份字段,无需刷新整个页面,从而提供更流畅的交互...

    jquery + kindEditor使用

    // 给编辑器赋值 }, error: function() { alert("系统错误"); } }); } ``` #### 三、注意事项 - **跨域问题**:在进行文件上传时,需要注意服务器端的跨域设置。 - **安全性考虑**:在处理用户输入的数据...

    Jquery插件easyUi实现表单验证示例

    // 将格式化后的字符串赋值给相应的输入框 $('#addSnumber').attr('validType', 'snumber[' + snumbersStr + '], number'); ``` 这样便可以动态地根据服务器返回的数据来设置验证规则。在动态加载控件的情况下,...

    jquery各大学选择插件

    用户在列表中选择学校后,插件将所选学校的值(比如ID或名称)赋值给关联的HTML元素,通常是隐藏的input字段,以便在提交表单时能够传递这个信息。 在实现这个功能时,开发者可能使用了以下jQuery方法: 1. `$...

    jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签

    输入框(input)是一种常见的表单元素,允许用户输入文本信息。每个input标签可以拥有不同的属性,如type(定义输入类型)、name(定义输入字段的名称)、value(定义输入字段的初始值)等。在本例中,input标签被动态...

    jQuery常用方法

    4. **获取元素内容**:使用`.html()`、`.text()`或`.val()`获取元素的HTML内容、纯文本内容或表单元素的值,如: ```javascript var content = $("#content").html(); ``` 5. **设置元素内容**:同样,这些方法也可...

    jquery刷新页面和JS常用的函数

    ### jQuery 刷新页面与 JavaScript 常用函数详解 #### 一、jQuery 刷新页面方法 在实际开发中,有时我们需要通过脚本来控制页面的刷新。对于这种情况,jQuery 提供了简便的方式来完成这一操作。 **刷新当前页面:...

    h5、css、js、DOM、BOM、jQuery、Ajax

    例如,新的表单控件(如`&lt;input type="date"&gt;`)、音频和视频元素(`&lt;audio&gt;`和`&lt;video&gt;`),以及离线存储(通过`localStorage`和`sessionStorage`)。HTML5还引入了语义化标签,如`&lt;header&gt;`、`&lt;footer&gt;`、`...

Global site tag (gtag.js) - Google Analytics