相信很多小伙伴都会遇到需要做表单的需求，就像我现在做的医院项目，茫茫多的表单无穷无尽。一开始做表单使用最笨的方法：一个个span去定义ID，每个数据都用ajax获取后赋值显示，然后在表单提交前一个个用jQuery根据ID获取元素的value，组成一个model来提交给服务器。
后来发现使用jQuery可以大大简化这个过程。于是我修改了工作方法，总结了我的一些提高写表单效率的方法。
需求
表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。
注意：如果元素ID和服务器上获取的json字段的名字是一样的，那么这篇文章或许能对你提高工作效率有所帮助。
文本和文本框
对于文本和文本框，我们通常需要为元素添加ID来绑定和获取数据。
将数据显示到界面中
•用for循环遍历解析成功的JSON数据
•通过if判断过滤数据是span的还是input的。
•将数据传给和数据名同名的ID元素。
for (var key in json) { //过滤type为text的文本框 if ($('#' + key).attr('type') == 'text') { $('#' + key).val(json[key]); } if($('#' + key).prop('tagName') == 'SPAN'){ $('#' + key).text(json[key]); }}快速获取数据对象用于提交服务器
•定义空model对象。
•通过jQuery选择器获取目标元素的value。
•将数据传入model中，对象元素的字段就是HTML元素的ID。
var model = {};$('input[type="text"]').each(function () { model[$(this).attr('id')]=$(this).val();});$('span').each(function () { model[$(this).attr('id')]=$(this).text();});console.log(model);按照如下方法，我们只需要照着后端提供的数据字段给HTML定义id，而JS就不需要写太多代码就可以完成表单了。再也不怕表单字段太多了。
全部代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.2.3.js"></script></head><body> <div> <div> <label>姓名：<input type="text" id="name"></label> <label>性别：<input type="text" id="sex"></label> <label>年龄：<input type="text" id="age"></label> <label>时间：<input type="text" id="time"></label> </div> <div> <label>a：<span id="param01">1</span></label> <label>b：<span id="param02">2</span></label> <label>c：<span id="param03">3</span></label> <label>d：<span id="param04">4</span></label> </div> </div> <button onclick="showResult()">显示结果</button> <script> //多条input或者span的快速赋值 //data是模拟服务器返回的JSON数据 var data = '{"name":"张三","sex":"女","age":22,"time":"2016-5-10","param01":111,"param02":222,"param03":333,"param04":444}'; //将数据显示到页面中 var json = eval('(' + data + ')'); for (var key in json) { if ($('#' + key).attr('type') == 'text') { $('#' + key).val(json[key]); } if($('#' + key).prop('tagName') == 'SPAN'){ $('#' + key).text(json[key]); } } //获取文本和文本框的内容转为JSON对象 function showResult() { var model = {}; $('input[type="text"]').each(function () { model[$(this).attr('id')]=$(this).val(); }); $('span').each(function () { model[$(this).attr('id')]=$(this).text(); }); console.log(model); } </script></body></html>
新闻热点
疑难解答
图片精选
