クリック時にデータ読み込みリストを切断せずに Ajax を実現する方法

今回は、Ajax がクリック時にノンストップのデータ読み込みリストを実現する方法を紹介します。 クリック時にノンストップのデータ読み込みリストを実現するための Ajax の 注意事項 は何ですか。実際のケースを見てみましょう。

Ajax入門

AJAXとは「Asynchronous

Javascript And XML」(Asynchronous JavaScript and XML)の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。

AJAX = 非同期 JavaScript および XML (標準ユニバーサル マークアップ言語のサブセット)。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

それぞれの機能を実装するにはさまざまな方法とアイデアがあります。今日は私が作った小さなローディング機能をまとめます。

ローディングは非常に一般的であり、携帯電話中毒者は皆、彼女をよく知っています。 Weibo、モーメント、スペースなどをスクロールするたびに、一定量までスライドすると、上にスライドしてさらに読み込むように通知されます。これは、クリックして読み込む方法の 1 つであり、もう 1 つはクリックして読み込む方法です。一定量をロードしてからクリックし、一定量をロードします（大量のナンセンス）。

それでは、このようなデータリストを 1 つずつロードする ajax について話しましょう。

最初に 10 を表示し、クリックしてさらにロードし、次に 10 を表示します。今回はロード量を制御するために判断を使用する必要があり、10 に達したらロードを停止するかどうかを判断し、クリックします。ボタンをクリックして、次の 10 回のロード後にロードを続行します。

10 個のアイテムのみの読み込みを制御したい場合はどうすればよいですか。 i を走査して 10 を判断することはできません。10 をロードした後、後でロードがあるため、次の 10 を判断するのは困難です。そのため、ロードされた数を計算するために新しい変数を定義する必要があります。

OK このように書きます:

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

次に、さらに 10 個をロードしてこのメ​​ソッドを呼び出す必要があるため、このメソッドは関数名を宣言し、次回使用する必要があるときに呼び出す必要があります。必要に応じてパラメーターを渡すこともできます。ここで別の質問があります。初めて 10 個のデータをロードした後、最初の 10 個のデータをロードし、次に次の JSON データをロードする必要があります。 ? ? 問題はありません。上で定義した関数を呼び出してパラメータを渡すことができます。パラメーターを計算するにはどうすればよいですか? ? ? まず、パラメーターが何に関係しているのか、それが i に何に関係しているのか、i が何に関係しているのかを考えてください。それとも何が私に影響を与えるのでしょうか？

その値のみが影響を受けるようですが（ナンセンスですよね）、この場合、その値は変化しない数値であることはできず、変数であることしかできません。では、変数はどこから来たのでしょうか？ ? ?

クリック イベントもあることを忘れないでください。まず、クリック数の変数 var clickNum = 0 を定義します。ロードされるたびに 10 になるため、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) の場合、クリック ボタンは非表示になります。

アイデアは基本的に明確です

二、实现功能

HTML：

<dl id="incomeNum">
　　<dt><em></em>每日分配收益</dt>
</dl>
<p class="jiaZai_more">点击查看更多</p>

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);
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax怎么实现智能提示关联词搜索

jQuery.ajaxWebService请求WebMethod处理Ajax

以上がクリック時にデータ読み込みリストを切断せずに Ajax を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。