javascript获取表单数据的原始做法和升级做法实例详解

接触过angularjs的都知道,ng支持双向绑定，我们可以轻轻松松的通过ngmodel将我们的值绑定到界面，当修改了值提交表单的时候不需要再重新通过id去重新抓取输入框信息了。那对于我们开发前台网站，不用ng一类的mvvm框架，只引用了jquery，那么在处理表单的时候该怎么做呢。

一. 原始做法

  
   --请选择--
   --1--
   --2--
   --3--
  
  
  
  
程序员A会说,So easy,通过Jquery id 去获取每个输入框的值就OK。多简单。
function getEntity(){
  return {
    select1:$("#select1").val(),
    radio1:$("#radio1").prop('checked'),
    text1:$("text1").val(),
    textArea1:$("textArea1").val()
  }
}
二. 升级做法.
 程序员B说, 这样不行哦，很多页面都有表单提交, 那不是每个地方都要用Jquery去获取值，如果以后新增了输入框，每次HTML修改了，还要修改对应的JS，多麻烦。于是爱偷懒的程序员B想到了一种方法，通过自定义标签来实现。
立即学习“Java免费学习笔记（深入）”；

							

								
								

									论论App
									
AI文献搜索、学术讨论平台，涵盖了各类学术期刊、学位、会议论文，助力科研。
								
								下载 
							
						
 2.1  我们将表单包装到一个form的p下，每个输入的控件新增一个data-field属性. data-field里面写构建实体的属性名称，考虑到会出现嵌套的对象。所以data-field 里面属性名称通过 . 点来隔开，譬如  data-field='Person.Name' 后面就会构建出 { Person:{ Name:xxx }} .下面的是没有嵌套的对象的例子

    
     --请选择--
     --1--
     --2--
     --3--
    
    
    
    
 
2.2 提供一个getEntity方法。 读取外层的Form然后找到所有的data-field 属性去遍历. 因为输入框有checkbox和radio，input和select, 所以判断类型先取出值。然后调用getField方法构建实体。代码就不做详细解答了。应该都能看懂。只是想表达一下思路想法而已。
function getEntity(form) {
   var result = {};
   $(form).find("[data-field]").each(function() {
     var field = $(this).attr("data-field");
     var val;
 
     if ($(this).attr('type') == 'checkbox') {
       val = $(this).prop('checked');
     } else if ($(this).attr('type') == 'radio') {
       val = $(this).prop('checked');
     } else {
       val = $(this).val();
     }
     // 获取单个属性的值,并扩展到result对象里面
     getField(field.split('.'), val, result);
   });
   return result;
 }

function getField(fieldNames, value, result) {
  if (fieldNames.length > 1) {
    for (var i = 0; i < fieldNames.length - 1; i++) {
      if (result[fieldNames[i]] == undefined) {
        result[fieldNames[i]] = {}
      }
      result = result[fieldNames[i]];
    }
    result[fieldNames[fieldNames.length - 1]] = value;
  } else {
    result[fieldNames[0]] = value;
  }
}
下面我们来看看看嵌套的对象

    
     --职位--
     java工程师
     .net工程师
     python工程师
    
    
  

2.5  提供了获取实体的方法，当然也要提供赋值的方法呀。下面来看看赋值的方法
function setEntity(form, entity) {
  $(form).find("[data-field]").each(function() {
    var field = $(this).attr("data-field");
    fieldNames = field.split('.');
    var value = JSON.parse(JSON.stringify(entity));
    for (var index = 0; index < fieldNames.length; index++) {
      value = value[fieldNames[index]];
      if (!value) {
        break;
      }
    }
    if ($(this).attr("type") === "checkbox" ||
      $(this).attr("type") === "radio") {
      $(this).attr('checked', Boolean(value));
    } else {
      if (value) {
        $(this).val(value);
      } else {
        $(this).val("");
      }
    }
  })
}