一般网站采用ajax从后台取数据，后台返回json数据，在form表单需要做更新操作时，需要将从服务器取到的数据回显到form表单的输入域中，普遍的做法是每个输入域中设置id，然后一个个赋值，这种做法是重复工作较多且容易出错，基于此，自己封装了一段js代码采用jquery插件的方式用于回显form表单的值，输入域只需要设置name属性即可。废话不多说，上源码。
想免费获取流量，请关注公众号 ：流量向前冲 (liulxqc)
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script> | |
| $.extend({ | |
| str2Value: function(p, str) { | |
| var strs = str.split('.'); | |
| var _tt = p; | |
| for (var i = 0; i < strs.length; i++) { | |
| var tmp = strs[i]; | |
| if (tmp.indexOf('[') != -1) { | |
| var pre = tmp.substring(0, tmp.indexOf('[')), | |
| num = tmp.substring(tmp.indexOf('[') + 1, tmp.indexOf(']')); | |
| if (typeof(_tt) != 'undefined'&& typeof(_tt[pre]) != 'undefined'&& typeof(_tt[pre][num]) != 'undefined') { | |
| _tt = _tt[pre][num]; | |
| continue; | |
| } else { | |
| return null; | |
| } | |
| } | |
| if (typeof(_tt) != 'undefined'&& typeof(_tt[strs[i]]) != 'undefined'&& typeof(_tt[strs[i]]) != 'undefined') { | |
| _tt = _tt[strs[i]]; | |
| continue; | |
| } else { | |
| return null; | |
| } | |
| } | |
| return _tt; | |
| } | |
| }); | |
| (function() { | |
| jQuery.extend(jQuery.fn, { | |
| json2Form: function(json) { | |
| var tmp = json, | |
| _form = $(this).attr('id'); | |
| if (!_form) { | |
| _form = (new Date()).getTime(); //随机生成一个ID | |
| $(this).attr('id', _form); | |
| } | |
| jQuery("#"+ _form + " :input").each(function(i) { | |
| var _name = $(this).attr('name'); | |
| if (_name) { | |
| var vv = $.str2Value(tmp, _name); | |
| if (vv !== null) { | |
| var _type = $(this).attr("type"); | |
| if (_type == 'text'|| _type == 'hidden') { | |
| $(this).val(vv); | |
| } else if (_type == 'radio') { | |
| $("#"+ _form + " :input[type=radio][name='"+ _name + "'][value='"+ vv + "']").attr("checked", "checked"); | |
| } else if (_type == 'checkbox') { | |
| var arr = vv.split(','); | |
| for (var i = 0; i < arr.length; i++) { | |
| $("#"+ _form + " :input[type=checkbox][name='"+ _name + "'][value='"+ arr[i] + "']").attr("checked", "checked"); | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| jQuery("#"+ _form + " textarea").each(function(i) { | |
| var _name = $(this).attr('name'); | |
| if (_name) { | |
| var vv = $.str2Value(tmp, _name); | |
| if (vv !== null) { | |
| $(this).val(vv); | |
| } | |
| } | |
| }); | |
| jQuery("#"+ _form + " select").each(function(i) { | |
| var _name = $(this).attr('name'); | |
| if (_name) { | |
| var vv = $.str2Value(tmp, _name); | |
| if (vv !== null) { | |
| if ($(this).attr('multiple')) { | |
| var _ss = vv.split(','); | |
| for (var n = 0; n < _ss.length; n++) { | |
| $(this).children('option[value="'+ _ss[n] + '"]').attr("selected", "selected"); | |
| } | |
| } else { | |
| $(this).val(vv); | |
| $(this).attr('_defaultValue', vv); | |
| } | |
| $(this).trigger('change'); //解决firefox下通过js改变值后不触发onchange事件,这里手动触发 | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| })(jQuery); | |
| </script> | |
| </head> | |
| <body> | |
| <form id="addForm"> | |
| <table> | |
| <tr> | |
| <td><label for="txtname">姓名：</label></td> | |
| <td><input type="text" name="name" /></td> | |
| </tr> | |
| <tr> | |
| <td><label for="txtpswd">性别：</label></td> | |
| <td> | |
| <select name="sex"> | |
| <option value=""> | |
| 请选择 | |
| </option> | |
| <option value="1"> | |
| 男 | |
| </option> | |
| <option value="2"> | |
| 女 | |
| </option> | |
| </select> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan=2> | |
| <input type="submit" /> | |
| </td> | |
| </tr> | |
| </table> | |
| </form> | |
| </body> | |
| <script> | |
| var datas = { | |
| name : "流量向前冲", | |
| sex : 1 | |
| } | |
| $("#addForm").json2Form(datas); | |
| </script> | |
| </html> |
想免费获取流量，请关注公众号 ：流量向前冲 (liulxqc)