Ajax點擊不斷載入資料列表_AJAX相關

Ajax簡介

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

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

實現每一種功能都有各種各樣的方法和思路，今天總結我的一個小小的載入功能。

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

現在我們就來說說ajax逐個載入資料，類似這樣的資料列表。

先是顯示10個，然後點擊載入更多，再顯示10個·····

一、思路

一般使用ajax載入的話，一下會載入全部資料，這次要控制量的載入，那就要用到判斷，判斷載入到10個停止載入，後面通過點擊按鈕，在接著載入完的10個後面繼續載入。

要想控制只載入10個怎麼辦捏。不能通過遍曆的 i 來判斷 10個，因為載入完10個後後面還要載入，這樣下一個10個就不好判斷了，所以需要定義一個新的變數，來計算載入的個數,

可以這樣寫：

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

然後需要再載入10個，再調用這個方法，所以這個方法需要聲明一個函數名，下次需要用的時候在調用，如果需要傳參也可以。現在還有個問題，第一次進來載入完10個後，需要再載入前10個資料接著後面的json資料，怎麼辦呢？？？

沒關係，可以通過調用上面定義好的函數，然後傳參。參數怎麼計算呢？？？

先想一個參數和什麼有關係，和 i 有關係，i 和什麼有關係呢？或者說什麼可以影響 i 呢？

好像只有它的值才會影響（那不是廢話嗎），這樣的話它的值就不能是一個不變的數了，只能是一個變數，那麼變數從哪裡來呢？？？

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

i = 10*clickNum，這是每次載入第一個資料的索引值。這樣我們就解決了上面那個問題。

此時還有問題要解決，當資料全部點擊載入完後，點擊按鈕需要隱藏，那怎麼計算資料載入完了呢？？？

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

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

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

思路基本清晰了

二、實現功能

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個一組的組數if(cNum >= x){$(".jiaZai_more").hide(); //當點擊更多的次數 ≥ 組數時，隱藏按鈕}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; //點擊的次數$(".jiaZai_more").on('click', function(event) {event.preventDefault();clickNum++;var iNum = 10*clickNum; //每次點擊開始載入的第一個索引值nwalletProfit(iNum, clickNum);});

以上所述是小編給大家介紹的Ajax點擊不斷載入資料列表，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！