ajax 请求大量数据 — 更快捷的渲染数据方式；

前言：当下前端各大框架盛行，极大地提高了开发的效率，但仍旧不会有ajax请求数据大量的数据的时候，这时需要我们发现共性，方便快捷的渲染数据；

当数据结构 如下↓

data: [ user：[ {uid:'1,uname:'XXX'',age:20,sex:0}, {uid:'2,uname:'XXX'',age:25,sex:1}, {uid:'3,uname:'XXX'',age:28,sex:0}, ... ], product: [ {pid:225,pname:'XXX',...}, {pid:228,pname:'XXX',...}, ... ] ... ] // 自定义属性：XXX-attr 与数据结构中的名字对应，方便查找； <div> <label>uid：</label> <div user-attr="uid"></div>//重点在于自定义属性 </div> <div> <label>姓名：</label> <div user-attr="uname"></div> </div> <div> <label>年龄：</label> <div user-attr="age"></div> </div> //...... <div> <label>产品ID：</label> <div produat-attr="pid"></div> </div> <div> <label>产品名：</label> <div produat-attr="pname"></div> </div> // 请求数据 --- 代码如下↓； $.ajax({ type: 'post', dataType: 'json', url: '/admin/xxx/xxx', data: {}, success: function (data) { var user= data['user']; //获取用户的属性 var produat= data['produat']; // ... for (var key in user) { //遍历用户的所有属性，key为属性名 var userrbox = $('div[user-attr="' + key + '"]'); //通过属性名获取存储变量的div var uservalue = user[key]; //定义变量存放属性值 userbox.text(uservalue); //赋值 } for (var key in produat) { var produatbox = $('div[produat-attr="' + key + '"]'); var produatvalue = produat[key]; produatbox .text(produatvalue ); } // ... }

通过上述操作值会自动填入```

总结：该方法对于多个属性、大量数据很适用，但是数据中的个别数组还需遍历获取；