在项目中经常会遇到增删改的功能,在编辑表单的时候由于表单文本数量较多一个一个赋值代码冗杂不说,也大大降低了时间效率,同事告诉一个快捷方法,特别好用,特此记录一下:首先这里需要先下载underscore.js插件,这是一款轻量级的js插件,有兴趣的同学可以了解一下:
underscore.js官方文档地址
1.html
<form id="EditForm" name="EditForm" method="post" action="">
<input id="param1" name="param1" type="text" />
<input id="param2" name="param2" type="text" />
<input id="param3" name="param3" type="text" />
<input id="param4" name="param4" type="text" />
<input id="param5" name="param5" type="text" />
<input id="param6" name="param6" type="text" />
<input id="param7" name="param7" type="text" />
<input id="param8" name="param8" type="text" />
<input id="param9" name="param9" type="text" />
<input id="param10" name="param10" type="text" />
</form>
2.js
这里编辑数据的接口用的ajax的post请求,接口中的字段值和前端html页面中的id值保持一致,而input标签的id和name一样,这样一一对应,在读取接口数据的过程中会直接给前端input赋值。
$.post("ajax/test.json", function(jsondata) {
if (jsondata != null) {
$('#EditForm').find(
_.each(_.pairs(jsondata), function (item) {
$('#EditForm').find('#' + item[0]).val(item[1])
}));
}
});