欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù))

總結(jié):兩種獲取數(shù)據(jù)的方法,一種是通過(guò)append的方法把li直接拼接到ul里面,一種是前臺(tái)寫死,后臺(tái)數(shù)據(jù)根據(jù)前臺(tái)的id進(jìn)行一一對(duì)應(yīng)來(lái)獲取。

以上這篇JQuery通過(guò)后臺(tái)獲取數(shù)據(jù)遍歷到前臺(tái)的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • jQuery應(yīng)用中特殊字符處理的問(wèn)題

    jQuery應(yīng)用中特殊字符處理的問(wèn)題

    今天在弄?jiǎng)討B(tài)菜單的時(shí)候發(fā)現(xiàn)id里面包含特殊字符"/",糾結(jié)了N久,就是不能根據(jù)這個(gè)ID獲取到節(jié)點(diǎn)
    2011-06-06
  • jQuery無(wú)刷新分頁(yè)完整實(shí)例代碼

    jQuery無(wú)刷新分頁(yè)完整實(shí)例代碼

    這篇文章主要介紹了jQuery無(wú)刷新分頁(yè)實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)分頁(yè)的數(shù)值計(jì)算與元素操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口

    jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口

    碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候,我們就需要用JS去處理,去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬;今天弄了2種情況,一個(gè)是相對(duì)于屏幕窗體,一個(gè)是相對(duì)于當(dāng)前的窗口,看代碼
    2013-04-04
  • 分享jQuery的3種常見(jiàn)事件監(jiān)聽(tīng)方式

    分享jQuery的3種常見(jiàn)事件監(jiān)聽(tīng)方式

    這篇文章主要介紹了jQuery常見(jiàn)事件的監(jiān)聽(tīng)方式,頁(yè)面經(jīng)常會(huì)有各種事件發(fā)生,事件發(fā)生后需要進(jìn)行一些特定處理,即執(zhí)行特定的函數(shù)或者語(yǔ)句。這就需要對(duì)事件進(jìn)行監(jiān)聽(tīng),下面關(guān)于監(jiān)聽(tīng)事件的介紹,需要的小伙伴可以參考一下
    2022-03-03
  • jQuery表單驗(yàn)證功能實(shí)例

    jQuery表單驗(yàn)證功能實(shí)例

    這篇文章主要介紹了jQuery表單驗(yàn)證功能,涉及jquery針對(duì)表單項(xiàng)的讀取與正則判定技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-08-08
  • jQuery使用手冊(cè)之二 DOM操作

    jQuery使用手冊(cè)之二 DOM操作

    jQuery使用手冊(cè)之二 DOM操作...
    2007-03-03
  • jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例

    jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例

    這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下
    2018-05-05
  • jQuery中toggleClass()方法用法實(shí)例

    jQuery中toggleClass()方法用法實(shí)例

    這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類進(jìn)行切換的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery中closest和parents的區(qū)別分析

    jQuery中closest和parents的區(qū)別分析

    本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹,在jquery中parents()查找父級(jí)元素刪除的時(shí)候,發(fā)現(xiàn)它不包含根元素,于是用了closest(),效果不錯(cuò),下面我來(lái)給大家具體的介紹一下
    2015-05-05
  • JQuery select控件的相關(guān)操作實(shí)現(xiàn)代碼

    JQuery select控件的相關(guān)操作實(shí)現(xiàn)代碼

    JQuery獲取和設(shè)置Select選項(xiàng)方法匯總?cè)缦?,需要的朋友可以參考?/div> 2012-09-09

最新評(píng)論