为了提高前端小伙伴的开发效率,造了个基于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属性。
分享到:
相关推荐
// 使用serializeArray方法获取表单元素的名称和值 // 遍历获取到的数组 $(array).each(function() { if (serializeObj[this.name]) { // 如果当前字段名已存在于serializeObj对象中 if ($.isArray...
总结起来,通过上述步骤,我们可以使用jQuery将HTML表单元素序列化为JSON对象,这在与服务器进行数据交互时非常有用。这个过程包括了选择表单元素、序列化为数组、处理同名元素以及将数据结构转换为JSON格式。这个...
然后,我们使用jQuery的`find()`方法找到新行中的每个单元格(id分别为"id"、"url"和"title"),并使用`text()`方法将JSON对象的相应属性值赋给它们。最后,我们使用`appendTo()`方法将新创建的行添加到表格的tbody...
在给出的代码示例中,通过$.fn.serializeJson和$.fn.serializeObject两个自定义的jQuery插件方法,演示了如何将表单数据转换为JSON对象。这两个函数通过遍历表单内所有控件,并根据控件类型处理name和value,最终...
- **Struts2的JSON插件**:虽然题目要求不使用JSON,但通常情况下,Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过,我们可以通过设置Content-Type为"text/plain"或"text/html",让Struts2返回非JSON...
在用户提交表单后,jQuery将数据序列化为JSON格式发送给服务器,同时监听服务器的JSON响应,根据返回的信息更新页面状态或显示错误提示。 5. **异常处理与提示**:在Action中定义message变量,用于存储操作结果或...
当需要将JSON数据填充到表单元素中时,可以通过AJAX获取JSON数据,然后遍历JSON对象,为表单中的对应元素赋值。例如: ```javascript $.getJSON('url_to_file', function(data) { for (var i in data) { $('...
用表单元素class属性可以针对性地组合JSON数据。 2、后端ASP.NET用JavaScriptSerializer反序列化为对象实列。 3、好处:简化了前端数据读取与后端数据赋值。 代码如下:function GetJSONStr(class_name) { var a = []...
然而,jQuery作为一个广泛使用的JavaScript库,并没有直接提供将表单序列化为JSON对象的内置方法。尽管如此,开发者社区已经提出了解决方案,使得我们可以借助现有的方法实现这一功能。 首先,来看一下jQuery的...
- 创建一个空的JSON对象,并将每个表单元素的`name`属性作为键,其值作为对应的值。 3. **特殊处理**: - 处理复选框和多选下拉列表时,需要将其值组织为数组形式。 - 对于没有`name`属性的元素,可以考虑忽略...
2. **配置模型**:创建一个 JSON 对象来定义模型,包括各个字段及其对应的 DOM 元素。例如: ```javascript var viewModel = { name: $('#nameInput'), age: $('#ageInput') }; ``` 3. **初始化插件**:在...
在jQuery中,`$("#form").serializeArray()`方法可以将表单中的所有元素转换为一个数组,其中每个元素都是一个对象,包含`name`和`value`属性。这个数组的结构类似于: ```javascript [ { "name": "element1Name...
服务器响应的数据被解析为JSON对象,然后将其`city`和`province`属性赋值给对应的表单字段。 使用Ajax和jQuery,我们可以实现用户在选择邮政编码后实时更新城市和省份字段,无需刷新整个页面,从而提供更流畅的交互...
// 给编辑器赋值 }, error: function() { alert("系统错误"); } }); } ``` #### 三、注意事项 - **跨域问题**:在进行文件上传时,需要注意服务器端的跨域设置。 - **安全性考虑**:在处理用户输入的数据...
// 将格式化后的字符串赋值给相应的输入框 $('#addSnumber').attr('validType', 'snumber[' + snumbersStr + '], number'); ``` 这样便可以动态地根据服务器返回的数据来设置验证规则。在动态加载控件的情况下,...
用户在列表中选择学校后,插件将所选学校的值(比如ID或名称)赋值给关联的HTML元素,通常是隐藏的input字段,以便在提交表单时能够传递这个信息。 在实现这个功能时,开发者可能使用了以下jQuery方法: 1. `$...
输入框(input)是一种常见的表单元素,允许用户输入文本信息。每个input标签可以拥有不同的属性,如type(定义输入类型)、name(定义输入字段的名称)、value(定义输入字段的初始值)等。在本例中,input标签被动态...
4. **获取元素内容**:使用`.html()`、`.text()`或`.val()`获取元素的HTML内容、纯文本内容或表单元素的值,如: ```javascript var content = $("#content").html(); ``` 5. **设置元素内容**:同样,这些方法也可...
### jQuery 刷新页面与 JavaScript 常用函数详解 #### 一、jQuery 刷新页面方法 在实际开发中,有时我们需要通过脚本来控制页面的刷新。对于这种情况,jQuery 提供了简便的方式来完成这一操作。 **刷新当前页面:...
例如,新的表单控件(如`<input type="date">`)、音频和视频元素(`<audio>`和`<video>`),以及离线存储(通过`localStorage`和`sessionStorage`)。HTML5还引入了语义化标签,如`<header>`、`<footer>`、`...