一般网站采用ajax从后台取数据，后台返回json数据，在form表单需要做更新操作时，需要将从服务器取到的数据回显到form表单的输入域中，普遍的做法是每个输入域中设置id，然后一个个赋值，这种做法是重复工作较多且容易出错，基于此，自己封装了一段js代码采用jquery插件的方式用于回显form表单的值，输入域只需要设置name属性即可。废话不多说，上源码。
想免费获取流量，请关注公众号 ：流量向前冲 (liulxqc)
<!DOCTYPE html>
<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)
苏公网安备 32050502001014号