這篇文章主要介紹了Ajax點擊不斷加載數(shù)據(jù)列表的相關(guān)資料,需要的朋友可以參考下

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)建快速動態(tài)網(wǎng)頁的技術(shù)。

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

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

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

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

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

先是顯示10個，然后點擊加載更多，再顯示10個·····

一、思路

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

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

可以這樣寫：

var ci = 0;

for(var i = 0; i < data.list.length; i++){

ci++;

if(ci> 10){

break;

}

}

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

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

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

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

別忘了我們還有一個點擊事件，先定義一個 點擊次數(shù) 的變量 var clickNum = 0，因為每次加載時10個，所以 i 的值應(yīng)該為：

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

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

我們可以通過 點擊的次數(shù)clickNum 來計算，因為每次加載10個，所以可以計算出一共需要加載的次數(shù) parseInt((data.list.length)/10)+1，為什么加載的次數(shù)要加 1 呢？

因為parseInt()是取整，比如21/10=2，但實際需要加載 3 次，所以要加 1 ，巧的是我們第一次加載不用點擊，瀏覽器已加載進(jìn)來就讀取了10個數(shù)據(jù)，

所以clickNum = parseInt((data.list.length)/10)，當(dāng)clickNum == parseInt((data.list.length)/10) 時隱藏點擊按鈕。

思路基本清晰了

二、實現(xiàn)功能

HTML：

每日分配收益

點擊查看更多

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個一組的組數(shù)

if(cNum >= x){

$(".jiaZai_more").hide(); //當(dāng)點擊更多的次數(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 += '

';

htmltxt += '

'+date+'

';

htmltxt += '

'+data.list[i].profit+'%

';

if(ci> 10){

break;

}

$("#incomeNum").append(htmltxt);

}

}

},

error: function (e, d, c) {

console.log(d)

}

});

}

nwalletProfit(0);

var clickNum = 0; //點擊的次數(shù)

$(".jiaZai_more").on('click', function(event) {

event.preventDefault();

clickNum++;

var iNum = 10*clickNum; //每次點擊開始加載的第一個索引值

nwalletProfit(iNum, clickNum);

});

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

總結(jié)

以上是生活随笔為你收集整理的php ajax 加载列表,Ajax点击不断加载数据列表（图文教程）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。