利用JS轻松实现获取表单数据

「爱情、让人受尽委屈。」 2022-05-29 02:25 362阅读 0赞

转自：http://www.jb51.net/article/99261.htm

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

**一. 原始做法**

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"form"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>select</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'select1'</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>""</code> 
      <code>&gt;--请选择--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"1"</code> 
      <code>&gt;--1--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"2"</code> 
      <code>&gt;--2--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"3"</code> 
      <code>&gt;--3--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'radio1'</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"radio"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'text1'</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>textarea</code> 
      <code>id</code> 
      <code>=</code> 
      <code>'textArea1'</code> 
      <code>&gt;&lt;/</code> 
      <code>textarea</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

程序员A会说,So easy,通过Jquery id 去获取每个输入框的值就OK。多简单。

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code> getEntity(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>select1:$(</code> 
      <code>"#select1"</code> 
      <code>).val(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>radio1:$(</code> 
      <code>"#radio1"</code> 
      <code>).prop(</code> 
      <code>'checked'</code> 
      <code>),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text1:$(</code> 
      <code>"text1"</code> 
      <code>).val(),</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>textArea1:$(</code> 
      <code>"textArea1"</code> 
      <code>).val()</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**二. 升级做法.**

程序员B说, 这样不行哦，很多页面都有表单提交, 那不是每个地方都要用Jquery去获取值，如果以后新增了输入框，每次HTML修改了，还要修改对应的JS，多麻烦。于是爱偷懒的程序员B想到了一种方法，通过自定义标签来实现。

2.1  我们将表单包装到一个form的div下，每个输入的控件新增一个data-field属性. data-field里面写构建实体的属性名称，考虑到会出现嵌套的对象。所以data-field 里面属性名称通过 . 点来隔开，譬如  data-field='Person.Name' 后面就会构建出 \{ Person:\{ Name:xxx \}\} .下面的是没有嵌套的对象的例子

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"form"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>select</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'select1'</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>""</code> 
      <code>&gt;--请选择--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"1"</code> 
      <code>&gt;--1--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"2"</code> 
      <code>&gt;--2--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"3"</code> 
      <code>&gt;--3--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'radio1'</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"radio"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'text1'</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>textarea</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'textArea1'</code> 
      <code>&gt;&lt;/</code> 
      <code>textarea</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2.2 提供一个getEntity方法。 读取外层的Form然后找到所有的data-field 属性去遍历. 因为输入框有checkbox和radio，input和select, 所以判断类型先取出值。然后调用getField方法构建实体。代码就不做详细解答了。应该都能看懂。只是想表达一下思路想法而已。

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code> getEntity(form) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>result = {};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>$(form).find(</code> 
      <code>"[data-field]"</code> 
      <code>).each(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>field = $(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>"data-field"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>val;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>($(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>'type'</code> 
      <code>) == </code> 
      <code>'checkbox'</code> 
      <code>) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>val = $(</code> 
      <code>this</code> 
      <code>).prop(</code> 
      <code>'checked'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>if</code> 
      <code> ($(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>'type'</code> 
      <code>) == </code> 
      <code>'radio'</code> 
      <code>) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>val = $(</code> 
      <code>this</code> 
      <code>).prop(</code> 
      <code>'checked'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>val = $(</code> 
      <code>this</code> 
      <code>).val();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 获取单个属性的值,并扩展到result对象里面</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>getField(field.split(</code> 
      <code>'.'</code> 
      <code>), val, result);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>result;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>function</code> 
      <code> getField(fieldNames, value, result) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(fieldNames.length &gt; 1) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code> i = 0; i &lt; fieldNames.length - 1; i++) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(result[fieldNames[i]] == undefined) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>result[fieldNames[i]] = {}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>result = result[fieldNames[i]];</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>result[fieldNames[fieldNames.length - 1]] = value;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>result[fieldNames[0]] = value;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2.3 下面来看看上面输出的结果,哈哈值取到了。

![2016120616013084.png][]

2.4 下面我们来看看看嵌套的对象

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"form"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>select</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'Person.Job'</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>""</code> 
      <code>&gt;--职位--&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"java工程师"</code> 
      <code>&gt;java工程师&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"net工程师"</code> 
      <code>&gt;.net工程师&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>option</code> 
      <code>value</code> 
      <code>=</code> 
      <code>"python工程师"</code> 
      <code>&gt;python工程师&lt;/</code> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>data-field</code> 
      <code>=</code> 
      <code>'Person.Desc'</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

![2016120616013085.png][]

2.5  提供了获取实体的方法，当然也要提供赋值的方法呀。下面来看看赋值的方法

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code> setEntity(form, entity) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>$(form).find(</code> 
      <code>"[data-field]"</code> 
      <code>).each(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>field = $(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>"data-field"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>fieldNames = field.split(</code> 
      <code>'.'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>value = JSON.parse(JSON.stringify(entity));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code> index = 0; index &lt; fieldNames.length; index++) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>value = value[fieldNames[index]];</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(!value) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>break</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>($(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>"type"</code> 
      <code>) === </code> 
      <code>"checkbox"</code> 
      <code>||</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>"type"</code> 
      <code>) === </code> 
      <code>"radio"</code> 
      <code>) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>this</code> 
      <code>).attr(</code> 
      <code>'checked'</code> 
      <code>, Boolean(value));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(value) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>this</code> 
      <code>).val(value);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>this</code> 
      <code>).val(</code> 
      <code>""</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

![2016120616013086.png][]

呵呵,值附上去了.

**     三. 总结:**

上面只是提供了解决方案, 虽然前台系统,不会考虑像后台backend 系统那样，用react,angularjs这种MVVM框架, 虽然只是用了一个Jquery而已。不过我们还是可以通过一些方法来简化项目代码的。

data-field=“你的后台参数名”

发送到后台：

[Link 1]: http://www.jb51.net/article/99261.htm#
[2016120616013084.png]: http://files.jb51.net/file_images/article/201612/2016120616013084.png
[2016120616013085.png]: http://files.jb51.net/file_images/article/201612/2016120616013085.png
[2016120616013086.png]: http://files.jb51.net/file_images/article/201612/2016120616013086.png