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

創(chuàng)新互聯(lián)公司是專業(yè)的北川羌族網站建設公司，北川羌族接單;提供成都網站設計、成都網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行北川羌族網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

Ajax簡介

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術。

AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。

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

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

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

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

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

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

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

一、思路

一般使用ajax加載的話，一下會加載全部數(shù)據，這次要控制量的加載，那就要用到判斷，判斷加載到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個，再調用這個方法，所以這個方法需要聲明一個函數(shù)名，下次需要用的時候在調用，如果需要傳參也可以。現(xiàn)在還有個問題，第一次進來加載完10個后，需要再加載前10個數(shù)據接著后面的json數(shù)據，怎么辦呢？？？

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

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

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

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

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

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

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

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

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

思路基本清晰了

二、實現(xiàn)功能

HTML：

<dl id="incomeNum">
　　<dt><em></em>每日分配收益</dt>
</dl>
<div class="jiaZai_more">點擊查看更多</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個一組的組數(shù)
if(cNum >= x){
$(".jiaZai_more").hide(); //當點擊更多的次數(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 += '<h6 class="date">'+date+'</h6>';
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; //點擊的次數(shù)
$(".jiaZai_more").on('click', function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次點擊開始加載的第一個索引值
nwalletProfit(iNum, clickNum);
});

到此，關于“Ajax怎么實現(xiàn)點擊不斷加載數(shù)據列表”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網頁題目：Ajax怎么實現(xiàn)點擊不斷加載數(shù)據列表-創(chuàng)新互聯(lián)
網頁鏈接：http://chinadenli.net/article10/hpjdo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、網站維護、企業(yè)網站制作、微信公眾號、網站設計公司、移動網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)