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

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

 更新時間:2018年08月13日 16:22:03   作者:Gemini仔仔  
今天小編就為大家分享一篇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應(yīng)用中特殊字符處理的問題

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

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

    jQuery無刷新分頁完整實例代碼

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

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

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

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

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

    jQuery表單驗證功能實例

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

    jQuery使用手冊之二 DOM操作

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

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

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

    jQuery中toggleClass()方法用法實例

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

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

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

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

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

最新評論