主頁 > 知識(shí)庫 > Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表

Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表

熱門標(biāo)簽:個(gè)人怎樣在百度地圖標(biāo)注地名 硅語電話機(jī)器人公司 超級大富翁地圖標(biāo)注 云呼外撥網(wǎng)絡(luò)電話系統(tǒng) ai機(jī)器人電銷資源 騰訊地圖標(biāo)注位置能用多久 機(jī)器人電銷騙局揭秘 越南河內(nèi)地圖標(biāo)注 地圖標(biāo)注項(xiàng)目怎么樣

Ajax簡介

AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)。

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個(gè)網(wǎng)頁頁面。

實(shí)現(xiàn)每一種功能都有各種各樣的方法和思路,今天總結(jié)我的一個(gè)小小的加載功能。

加載很常見,每一位手機(jī)控都對她再熟不過了。每次我們在刷微博、朋友圈、空間······,滑到一定的量時(shí),會(huì)提醒上滑加載更多,這是一種加載方式;還有一種就是點(diǎn)擊加載,點(diǎn)擊加載一定的量,再點(diǎn)擊,再加載一定的量(說了一大堆廢話)。

現(xiàn)在我們就來說說ajax逐個(gè)加載數(shù)據(jù),類似這樣的數(shù)據(jù)列表。

先是顯示10個(gè),然后點(diǎn)擊加載更多,再顯示10個(gè)·····

一、思路

一般使用ajax加載的話,一下會(huì)加載全部數(shù)據(jù),這次要控制量的加載,那就要用到判斷,判斷加載到10個(gè)停止加載,后面通過點(diǎn)擊按鈕,在接著加載完的10個(gè)后面繼續(xù)加載。

要想控制只加載10個(gè)怎么辦捏。不能通過遍歷的 i 來判斷 10個(gè),因?yàn)榧虞d完10個(gè)后后面還要加載,這樣下一個(gè)10個(gè)就不好判斷了,所以需要定義一個(gè)新的變量,來計(jì)算加載的個(gè)數(shù),

可以這樣寫:

var ci = 0;
for(var i = 0; i  data.list.length; i++){
  ci++; 
  if(ci> 10){
  break;
  }
}

然后需要再加載10個(gè),再調(diào)用這個(gè)方法,所以這個(gè)方法需要聲明一個(gè)函數(shù)名,下次需要用的時(shí)候在調(diào)用,如果需要傳參也可以?,F(xiàn)在還有個(gè)問題,第一次進(jìn)來加載完10個(gè)后,需要再加載前10個(gè)數(shù)據(jù)接著后面的json數(shù)據(jù),怎么辦呢???

沒關(guān)系,可以通過調(diào)用上面定義好的函數(shù),然后傳參。參數(shù)怎么計(jì)算呢???

先想一個(gè)參數(shù)和什么有關(guān)系,和 i 有關(guān)系,i 和什么有關(guān)系呢?或者說什么可以影響 i 呢?

好像只有它的值才會(huì)影響(那不是廢話嗎),這樣的話它的值就不能是一個(gè)不變的數(shù)了,只能是一個(gè)變量,那么變量從哪里來呢???

別忘了我們還有一個(gè)點(diǎn)擊事件,先定義一個(gè) 點(diǎn)擊次數(shù) 的變量 var clickNum = 0,因?yàn)槊看渭虞d時(shí)10個(gè),所以 i 的值應(yīng)該為:

i = 10*clickNum,這是每次加載第一個(gè)數(shù)據(jù)的索引值。這樣我們就解決了上面那個(gè)問題。

此時(shí)還有問題要解決,當(dāng)數(shù)據(jù)全部點(diǎn)擊加載完后,點(diǎn)擊按鈕需要隱藏,那怎么計(jì)算數(shù)據(jù)加載完了呢???

我們可以通過 點(diǎn)擊的次數(shù)clickNum 來計(jì)算,因?yàn)槊看渭虞d10個(gè),所以可以計(jì)算出一共需要加載的次數(shù) parseInt((data.list.length)/10)+1,為什么加載的次數(shù)要加 1 呢?

因?yàn)閜arseInt()是取整,比如21/10=2,但實(shí)際需要加載 3 次,所以要加 1 ,巧的是我們第一次加載不用點(diǎn)擊,瀏覽器已加載進(jìn)來就讀取了10個(gè)數(shù)據(jù),

所以clickNum = parseInt((data.list.length)/10),當(dāng)clickNum == parseInt((data.list.length)/10) 時(shí)隱藏點(diǎn)擊按鈕。

思路基本清晰了

二、實(shí)現(xiàn)功能

HTML:

dl id="incomeNum">
  dt>em>/em>每日分配收益/dt>
/dl>
div class="jiaZai_more">點(diǎn)擊查看更多/div>

css:

此處省略css。

js:

function nwalletProfit(num, cNum){
$.ajax({
type: "post",
async: true,
url: url,
dataType: "json",
success: function (data) {
if (data.list.length > 0){
var i = num;
var ci= 0;
var x = parseInt((data.profit_list.length)/10);//x為每10個(gè)一組的組數(shù)
if(cNum >= x){
$(".jiaZai_more").hide(); //當(dāng)點(diǎn)擊更多的次數(shù) ≥ 組數(shù)時(shí),隱藏按鈕
}
for(; i  data.profit_list.length; i++){
var htmltxt = "";
ci++; 
var date = data.profit_list[i].date;
var year = date.substring(0, 4);
var month = date.substring(4, 6);
var day = date.substring(6);
date = year+'年'+month+'月'+day+'日';
htmltxt += 'dd>';
htmltxt += 'h5 class="date">'+date+'/h5>';
htmltxt += 'p class="income">'+data.list[i].profit+'%/p>';
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //點(diǎn)擊的次數(shù)
$(".jiaZai_more").on('click', function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次點(diǎn)擊開始加載的第一個(gè)索引值
nwalletProfit(iNum, clickNum);
});

以上所述是小編給大家介紹的Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • php+ajax實(shí)現(xiàn)無刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
  • jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼
  • 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
  • Ajax動(dòng)態(tài)加載數(shù)據(jù)庫示例
  • jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫
  • jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
  • vue.js 表格分頁ajax 異步加載數(shù)據(jù)
  • AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
  • Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
  • ajax實(shí)現(xiàn)加載數(shù)據(jù)功能

標(biāo)簽:舟山 內(nèi)蒙古 遼源 鄭州 洛陽 海南 林芝 邢臺(tái)

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表》,本文關(guān)鍵詞  Ajax,點(diǎn)擊,不斷,加載,數(shù)據(jù),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表》相關(guān)的同類信息!
  • 本頁收集關(guān)于Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章