快捷導(dǎo)航

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

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

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

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

前臺(tái)代碼：

案例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>時(shí)間</span>
<span>步驟</span>
<span>意見(jiàn)</span>
</li>
 </ul>
<ul class="fl" id="PRO_UL">
</ul>
</div>
</div>

調(diào)用接口：（每個(gè)公司用的方法不一樣，我這邊暫時(shí)用封裝好的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);

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

</script>

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

案例2：(通過(guò)后臺(tái)傳入的參數(shù)，在每個(gè)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分別是后臺(tái)獲取的數(shù)據(jù)）