使用ajax方式请求数据，向页面展示一个对象的时候，往往让人头疼的是一大堆 .val() .text()方法，这样做固然不会出错，但是效率太低
以下提供一个自己编写的Jquery模型驱动插件，正在测试中....目前可用。
前提：自行扩展data-model属性，用来控制数据展示
1 /** 2 * jquery-model.js 3 * author brose 4 * 5 **/ 6 ;(function(o) { 7 o.fn.extend({ 8 modelDriver: function(obj) { 9 var _this = this, 10 setting = obj || {}; 11 _this.find("[data-model]").each(function(index, item) { 12 var $item = $(item), 13 _nodeName = item.nodeName, 14 _modelName = $item.attr("data-model"); 15 for (var i in setting) { 16 if (i === _modelName) { 17 if (_nodeName === "INPUT" || _nodeName === "SELECT") { 18 $item.val(obj[i]); 19 } else { 20 $item.text(obj[i]); 21 } 22 } 23 } 24 }) 25 26 } 27 }); 28 })($);
<!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>