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ù))
總結(jié):兩種獲取數(shù)據(jù)的方法,一種是通過append的方法把li直接拼接到ul里面,一種是前臺寫死,后臺數(shù)據(jù)根據(jù)前臺的id進(jìn)行一一對應(yīng)來獲取。
以上這篇JQuery通過后臺獲取數(shù)據(jù)遍歷到前臺的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery彈出層始終垂直居中相對于屏幕或當(dāng)前窗口
碰到?jīng)]有固定高或者固定寬或者固定高和寬的時候,我們就需要用JS去處理,去動態(tài)獲取當(dāng)前窗口高或者寬;今天弄了2種情況,一個是相對于屏幕窗體,一個是相對于當(dāng)前的窗口,看代碼2013-04-04jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實例形式分析了jQuery針對xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05jQuery中closest和parents的區(qū)別分析
本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹,在jquery中parents()查找父級元素刪除的時候,發(fā)現(xiàn)它不包含根元素,于是用了closest(),效果不錯,下面我來給大家具體的介紹一下2015-05-05JQuery select控件的相關(guān)操作實現(xiàn)代碼
JQuery獲取和設(shè)置Select選項方法匯總?cè)缦?,需要的朋友可以參考?/div> 2012-09-09最新評論