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

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 );
        }        
        // ...
} 

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

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