ajax获取接口数据显示到页面之菜鸟分享

个人最近在开发项目中遇到了动态数据请求渲染的问题，能力有限，虽然解决了问题，但是觉得代码冗长，效率比较低，所以想优化一下，看能不能用其他方法提交一下效率。这个问题经历了三个节点。
第一个就是自己完全不熟其他方法的情况下独立完成的。那就是最基本的初始化/赋值/添加。

var jsonObj = eval('('+res+')');
                // console.log(jsonObj);
                var html='';
                var day_add = jsonObj.day_add;
                    html+=jsonObj.day_add;
                    $(".custorm").append(html);    

这种就是每个类都需要经历这三个步骤，代码冗长，效率低下。
那么我想着自己封装一下，这就是第二个节点。

<script type="text/javascript">
    $(function(){
    $.post("url?jsoncallback=?",{},function(res){ 
        var obj = eval('('+res+')');
        console.log(obj);
        var p=obj.day_add;
        var a=obj.new_app;
        var b=obj.not_app;
        var c=obj.dayfankui;
        var d=obj.passrate;
        var e=obj.includexujie_sendnums;
        var f=obj.notxujie_sendmoney;
        var g=obj.day_backmoney;
        var h=obj.day_num;
        var l=obj.total_app;
        var m=obj.yingshoubenjin;
        var n=obj.yuqidanshu;
        var o=obj.yuqilv;
        var p=obj.m1yuqilv;
        var q=obj.m3yuqilv;
        var r=obj.totalrate;
        //调用
        adds(p,'day_add');//今日注册量
        adds(a,'new_app');//今日新申请
        adds(b,'not_app');//待审数量
        adds(c,'dayfankui');//今日反馈数量  
        adds(d,'passrate');//今日通过率   
        adds(e,'includexujie_sendnums');//今天放款单数（包含续借）
        adds(f,'notxujie_sendmoney');//今日放款总额（不含续借）
        adds(g,'day_backmoney');//今天还款总额
        adds(h,'day_num');//今日还款单数
        adds(l,'total_app');//全部申请
        adds(m,'yingshoubenjin');//总贷款余额
        adds(n,'yuqidanshu'); //逾期单数
        adds(o,'yuqilv');//当前逾期率
        adds(p,'m1yuqilv');//M1逾期率
        adds(q,'m3yuqilv');//M3逾期率
        adds(r,'totalrate');//总通过率 
    },'json');
 }); 
    function adds(p,c){
        var html='';
        html += p;
        $("."+c).append(html);
    }
</script>

但是这种调用代码依旧是很麻烦。最后自己去网上看了一下遍历的方法，发现自己之前的方法都逊爆了，果然还是学习才能提高效率。那么就是第三种方法-遍历

<script type="text/javascript">
    $(function(){

    $.post("url?jsoncallback=?",{},function(res){
        // // // console.log(res(res);
        //var infos=['day_add','','']; //数据的key(键),class类名和此要一致
        //var obj = eval('('+res+')');
        var arr=JSON.parse(res);//json转化成数组
        console.log(arr);
        $.each(arr,function(i,val){ //遍历数组 
            $("."+i).append(val);  //可以看出，能成功执行的逻辑就是需要infos内配置i
        });
    },'json');
 }); 
</script>

这种方法简直了，提高了不少的效率。
ps：这些仅是我这只菜鸟的项目问题总结分享，如果对其他菜鸟有帮助，欢迎扎堆，不喜勿喷。