AJAX第二發

標籤：

　　開始總結自己在項目上的使用AJAX的情況：

　　該圖為向後台請求的資料，前台返回的結果，返回的資料類型為object，businessObj由許多key組成，我們項目前台需要調用的資料就藏在數組records中，可以通過 

　　　var records=data[‘businessObj‘][‘records‘];

　　　將records列印出來，輸出的內容為一個數組（我們項目中數組長度為1，項目初期，內容有點少，/(ㄒoㄒ)/~~~）,每個數組又是由一個對象組成。

　　下面上代碼嘍！！！！！！！！！！！！！！！！！！

 

 1　　　　　　　　 var count = 0;
 2             /** 3              * 上拉載入具體業務實現 4              */ 5             // var n=1; 6             function pullupRefresh() { 7                 setTimeout(function() { 8                     mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh((++count > <?php echo $page?$page:0?>)); //參數為true代表沒有更多資料了。 9                     var table = document.body.querySelector(‘.mui-table-view‘);10                     var cells = document.body.querySelectorAll(‘.mui-table-view-cell‘);11                     // var len=10;12     13                     var res=[];14                     $.ajax({15                         url: ‘__CONTROLLER__/messageAjax‘,16                         type: ‘post‘,17                         dataType: ‘json‘,18                         data: {pageIndex: count,type:‘activity‘},19                     })20                     .done(function(data) {21                         22                         var records=data[‘businessObj‘][‘records‘];23                         console.log(records);24 25                         var len=records.length;26                         for (var i = 0; i < len; i++) {27                             var li = document.createElement(‘li‘);28                             li.className = ‘mui-table-view-cell‘;29                             li.className = ‘mui-table-view-cell‘;30                             li.innerHTML += ‘<p class="hdate">‘+records[i][‘sendTime‘]+‘</p>‘
　　　　　　　　　　　　　　　　　　//首先進行判斷，是否含有h5URL連結，如果含有，再判斷是否是已讀的（1狀態），再用字串拼接的方法進行代碼串連，在前台頁面顯示title、圖片
31                             if(records[i][‘h5URL‘]){32                                 if (records[i][‘readStatus‘]==1) {33                                     34                                     li.innerHTML +=    ‘<a href= "‘+records[i][‘h5URL‘]+‘?recordId=‘+records[i][‘recordId‘]+‘" recordid="‘+records[i][‘recordId‘]+‘"><div class="hcon"><div class="hconW"><h2 class="fgrey">‘+records[i]["title"]+‘</h2><div class="bgblue"><img src=‘+records[i][‘imgSrc‘]+‘></div>‘+‘<p class="note" style="color:#999999;">‘+records[i][‘content‘]+‘</p>‘+‘<p class="ckxq">查看詳情<span class="seltarr2 fr mt10"></span></p></div></div></a>‘;35                                 }else{36                                     li.innerHTML +=    ‘<a href="‘+records[i][‘h5URL‘]+‘?recordId=‘+records[i][‘recordId‘]+‘" recordid="‘+records[i][‘recordId‘]+‘"><div class="hcon"><div class="hconW"><h2>‘+records[i]["title"]+‘</h2><div class="bgblue"><img src=‘+records[i][‘imgSrc‘]+‘></div>‘+‘<p class="note" style="color:#999999;">‘+records[i][‘content‘]+‘</p>‘+‘<p class="ckxq">查看詳情<span class="seltarr2 fr mt10"></span></p></div></div></a>‘;37 38                                 }39                             }
　　　　　　　　　　　　　　　　　　//如果沒有h5URL連結，對應就沒有要顯示的圖片，顯示對應的content就好
　　　　　　　　　　　　　　　　　　　else{40                                 if (records[i][‘readStatus‘]==1) {41                                     li.innerHTML +=    ‘<a onclick="updatestatus(‘+records[i][‘recordId‘]+‘,‘+‘/account/message/atDeatail/type/activity/recordId/‘+records[i][‘recordId‘]+‘)"><div class="hcon"><div class="hconW"><h2 class="fgrey">‘+records[i]["title"]+‘</h2><div class="bgblue"><img src=‘+records[i][‘imgSrc‘]+‘></div>‘+‘<p class="note" style="color:#999999;">‘+records[i][‘content‘]+‘</p>‘+‘<p class="ckxq">查看詳情<span class="seltarr2 fr mt10"></span></p></div></div></a>‘;42                                 }else{43                                     li.innerHTML +=    ‘<a onclick="updatestatus(‘+records[i][‘recordId‘]+‘,‘+‘/account/message/atDeatail/type/activity/recordId/‘+records[i][‘recordId‘]+‘)"><div class="hcon"><div class="hconW"><h2>‘+records[i]["title"]+‘</h2><div class="bgblue"><img src=‘+records[i][‘imgSrc‘]+‘></div>‘+‘<p class="note" style="color:#999999;">‘+records[i][‘content‘]+‘</p>‘+‘<p class="ckxq">查看詳情<span class="seltarr2 fr mt10"></span></p></div></div></a>‘;44                                 }45                             }
　　　　　　　　　　　　　　　　　　//最後將產生的li添加到頁面中46                             $("#va").append(li);47                         }            48                         // console.log(li);49                     })50                     .fail(function() {51                         return ;52                     })53                     .always(function() {54                         console.log("complete");55                     });56                     57                 }, 1500);58             59             }

 

AJAX第二發