做專案中，經常會通過呼叫後臺介面把資料顯示到前臺頁面上來，之前遇到過的問題是，前臺頁面是用ul+li標籤寫的，在呼叫介面除錯時發現返回的資料有很多組的，而在前臺顯示的時候只有一條資料，毋容置疑，一定是遍歷時出現了問題，下面來簡單分析下。

前臺程式碼：

案例1：

<div class="Record">
<div class="RecordLeft text-center fl">
<p><span>經辦記錄</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>

呼叫介面：（每個公司用的方法不一樣，我這邊暫時用封裝好的ajax呼叫）

<script type="text/javascript">

var APPLICATIONID = "";

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

 //APPLICATIONID 介面引數   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);

//下面三行程式碼對應的欄位是之前寫的，獲取出來的只是一組資料
            //$("#PRODATE").html(info[i].PRODATE);
            //$("#PRONAME").html(info[i].PRONAME);
            //$("#PROOPINION").html(info[i].PROOPINION);
            }
           
                   
            }
           }
    }

</script>

效果：（通過append的方法把後臺的幾組資料追加到ul裡面）

案例2：(通過後臺傳入的引數，在每個li標籤的a裡面加上 子數量/總數量，例如標籤1 2/12，... ...)

<div class="Mobile_left_con clearfix">
<ul class="clearfix">
<li id="T_00001"><a href="./UnitLicenseRuleSettingDetail.html"><span>標籤1</span><span class=" T_00002"></span></a></li>
<li id="T_00002"><a href="./UnitLicenseRuleSettingDetail.html"><span>標籤2</span><span class=" T_00002"></span></a></li>
<li id="T_00003"><a href="./UnitLicenseRuleSettingDetail.html"><span>標籤3</span><span class="T_00003"></span></a></li>
  </ul>
</div>

呼叫介面：

<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分別是後臺獲取的資料）

總結：兩種獲取資料的方法，一種是通過append的方法把li直接拼接到ul裡面，一種是前臺寫死，後臺資料根據前臺的id進行一一對應來獲取。