快捷導(dǎo)航

JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法

更新時間：2018年08月13日 16:22:03 作者：Gemini仔仔

今天小編就為大家分享一篇JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

做項目中，經(jīng)常會通過調(diào)用后臺接口把數(shù)據(jù)顯示到前臺頁面上來，之前遇到過的問題是，前臺頁面是用ul+li標(biāo)簽寫的，在調(diào)用接口調(diào)試時發(fā)現(xiàn)返回的數(shù)據(jù)有很多組的，而在前臺顯示的時候只有一條數(shù)據(jù)，毋容置疑，一定是遍歷時出現(xiàn)了問題，下面來簡單分析下。

前臺代碼：

案例1：

<div class="Record">
<div class="RecordLeft text-center fl">
<p><span>經(jīng)辦記錄</span></p>
</div>
<div class="RecordRight fl">
<ul class="fl">
<li>
<span>時間</span>
<span>步驟</span>
<span>意見</span>
</li>
 </ul>
<ul class="fl" id="PRO_UL">
</ul>
</div>
</div>

調(diào)用接口：（每個公司用的方法不一樣，我這邊暫時用封裝好的ajax調(diào)用）

<script type="text/javascript">

var APPLICATIONID = "";
$(function(){
 var data = new Object();
 data.APPLICATIONID = CVCFrameWork.getUrlParam("id"); 

 //APPLICATIONID 接口參數(shù) CVCFrameWork.getUrlParam封裝的獲取id方法

AjaxUtil.Ajax("../Server/Server.aspx/getHandleOpinions", JSON.stringify(data), null, AjaxSuccess, null, null);
});

//成功之后要... ...
function AjaxSuccess(data)
 {
   var result = JSON.parse(data);
   if (result.state == "SUCCESS") 
   {
   var message=result.message;
   var info=JSON.parse(message);
   if(info.length>0)
   {
   for(var i=0;i<info.length;i++) {
   var myli = "<li><span>"+info[i].PRODATE+"</span><span >"+info[i].PRONAME+"</span><span >"+info[i].PROOPINION+"</span></li>";
   $('#PRO_UL').append(myli);

//下面三行代碼對應(yīng)的字段是之前寫的，獲取出來的只是一組數(shù)據(jù)
   //$("#PRODATE").html(info[i].PRODATE);
   //$("#PRONAME").html(info[i].PRONAME);
   //$("#PROOPINION").html(info[i].PROOPINION);
   }
   
     
   }
   }
 }

</script>

效果：（通過append的方法把后臺的幾組數(shù)據(jù)追加到ul里面）

案例2：(通過后臺傳入的參數(shù)，在每個li標(biāo)簽的a里面加上子數(shù)量/總數(shù)量，例如標(biāo)簽1 2/12，... ...)

<div class="Mobile_left_con clearfix">
<ul class="clearfix">
<li id="T_00001"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>標(biāo)簽1</span><span class=" T_00002"></span></a></li>
<li id="T_00002"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>標(biāo)簽2</span><span class=" T_00002"></span></a></li>
<li id="T_00003"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>標(biāo)簽3</span><span class="T_00003"></span></a></li>
 </ul>
</div>

調(diào)用接口：

<script type="text/javascript">
var ABID = "";
var action = 0;
var ACCOUNT = "";
var ACENABLE = "";
$(function(){
Init(); 
});

function UnitRuleInit() {
var data = new Object();
data.ABID = "T_00001;T_00002;T_00003";//寫死
AjaxUtil.Ajax("../../Server/Server.aspx/LicenseInfo", JSON.stringify(data), null, AjaxSuccess, null, null);
 
};

function AjaxSuccess(data) {
   var result = JSON.parse(data);
   if (result.state == "SUCCESS") 
   {
   var message=result.message;
   var info=JSON.parse(message);
if(info.length>0)
   {
for(var i=0;i<info.length;i++) {
$("."+info[i].ABID).html(info[i].ACENABLE + "/" + info[i].ACCOUNT);
} 
   }
   }
   
  }

</script>

效果：（1/10、3/11、1/12分別是后臺獲取的數(shù)據(jù)）