JQuery通過后臺獲取數據遍歷到前臺的方法

2019-11-19 13:16:20

字體：大中小

來源：轉載

供稿：網友

做項目中，經常會通過調用后臺接口把數據顯示到前臺頁面上來，之前遇到過的問題是，前臺頁面是用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" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>標簽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>標簽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>標簽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分別是后臺獲取的數據）