這篇文章主要介紹“Ajax怎么實(shí)現(xiàn)點(diǎn)擊不斷加載數(shù)據(jù)列表”，在日常操作中，相信很多人在Ajax怎么實(shí)現(xiàn)點(diǎn)擊不斷加載數(shù)據(jù)列表問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Ajax怎么實(shí)現(xiàn)點(diǎn)擊不斷加載數(shù)據(jù)列表”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元市中做網(wǎng)站,已為上家服務(wù),為市中各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

Ajax簡(jiǎn)介

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)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

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

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

加載很常見，每一位手機(jī)控都對(duì)她再熟不過了。每次我們?cè)谒⑽⒉?、朋友圈、空間······,滑到一定的量時(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：

　　
每日分配收益

點(diǎn)擊查看更多