使用ajax方式请求数据，向页面展示一个对象的时候，往往让人头疼的是一大堆 .val() .text()方法，这样做固然不会出错，但是效率太低
以下提供一个自己编写的Jquery模型驱动插件，正在测试中....目前可用。
前提：自行扩展data-model属性，用来控制数据展示
/**
* jquery-model.js
* author brose
*
**/
;(function(o) {
o.fn.extend({
modelDriver: function(obj) {
var _this = this,
setting = obj || {};
_this.find("[data-model]").each(function(index, item) {
var $item = $(item),
_nodeName = item.nodeName,
_modelName = $item.attr("data-model");
for (var i in setting) {
if (i === _modelName) {
if (_nodeName === "INPUT" || _nodeName === "SELECT") {
$item.val(obj[i]);
} else {
$item.text(obj[i]);
}
}
}
}) }
});
})($);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.min.js"type="text/javascript"></script>
<script src="js/jquery-model.js"type="text/javascript"></script> <script> var _ajaxResult={username:"Brose",company:"中南海"}
$(function(){
$("#myModel").modelDriver(_ajaxResult);
}) </script> </head>
<body>
<div id="myModel">
用户名：<span data-model="username"></span><br>
密码：<input type="text" data-model="company" name="company" value="">
</div>
</body>
</html>