ajax獲取介面資料顯示到頁面之菜鳥分享
阿新 • • 發佈:2018-12-03
個人最近在開發專案中遇到了動態資料請求渲染的問題,能力有限,雖然解決了問題,但是覺得程式碼冗長,效率比較低,所以想優化一下,看能不能用其他方法提交一下效率。這個問題經歷了三個節點。
第一個就是自己完全不熟其他方法的情況下獨立完成的。那就是最基本的初始化/賦值/新增。
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:這些僅是我這隻菜鳥的專案問題總結分享,如果對其他菜鳥有幫助,歡迎扎堆,不喜勿噴。