So erreichen Sie Ajax, ohne beim Klicken die Datenladeliste zu trennen

Dieses Mal zeige ich Ihnen, wie Ajax beim Klicken eine ununterbrochene Datenladeliste erreichen kann Fall. Werfen wir einen Blick darauf.

Einführung in AjaxAJAX ist „Asynchrones

Javascript

und XML“ (Asynchrones JavaScript). und XML) bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein AJAX verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Es gibt verschiedene Methoden und Ideen, um jede Funktion zu implementieren. Heute werde ich eine kleine Ladefunktion von mir zusammenfassen.

Laden ist weit verbreitet und jeder Handysüchtige kennt sie bestens. Jedes Mal, wenn wir durch Weibo, Moments, Space... scrollen und zu einem bestimmten Wert schieben, werden wir daran erinnert, nach oben zu schieben, um mehr zu laden. Die andere Möglichkeit besteht darin, zum Laden zu klicken und zum Laden zu klicken Bestimmte Menge, dann klicken und dann eine bestimmte Menge laden (viel Unsinn).

Lassen Sie uns nun darüber sprechen, wie Ajax Daten einzeln lädt, ähnlich wie bei dieser Datenliste.

Zuerst 10 anzeigen, dann klicken, um mehr zu laden, dann 10 anzeigen...

1. Ideen Wenn Sie zum Laden Ajax verwenden, werden im Allgemeinen alle Daten auf einmal geladen, wenn Sie die Lademenge steuern möchten um den Ladevorgang nach eigenem Ermessen zu beurteilen. Stoppen Sie den Ladevorgang, wenn 10 Artikel geladen sind, und klicken Sie dann auf die Schaltfläche, um mit dem Laden fortzufahren, nachdem die nächsten 10 Artikel geladen wurden.

Was soll ich tun, wenn ich das Laden von nur 10 Artikeln steuern möchte? Sie können 10 nicht durch Durchlaufen von i beurteilen, da Sie nach dem Laden von 10 später laden müssen, sodass es schwierig ist, die nächsten 10 zu beurteilen. Daher müssen Sie eine neue Variable definieren, um die Anzahl der geladenen Daten zu berechnen,

kann so geschrieben werden:

Dann müssen Sie 10 weitere laden und dann diese Methode aufrufen, sodass diese Methode einen Funktionsnamen deklarieren und ihn aufrufen muss, wenn Sie ihn das nächste Mal verwenden müssen Sie müssen Parameter übergeben. Das ist auch in Ordnung. Jetzt gibt es noch eine Frage: Nachdem ich zum ersten Mal 10 Daten geladen habe, muss ich die ersten 10 Daten und dann die folgenden JSON-Daten laden. ? ?

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

Es spielt keine Rolle, Sie können die oben definierte Funktion aufrufen und dann die Parameter übergeben. Wie berechnet man Parameter? ? ?

Überlegen Sie zunächst, womit ein Parameter zusammenhängt, womit ist er verbunden, womit ist i verbunden? Oder was kann mich beeinflussen?

Es scheint, dass nur ihr Wert betroffen ist (ist das nicht Unsinn), ihr Wert kann also keine unveränderte Zahl, sondern nur eine Variable sein? Woher kommt die Variable? ? ?

Vergessen Sie nicht, dass wir auch ein Klickereignis haben. Definieren Sie zunächst eine Variable für die Anzahl der Klicks var clickNum = 0, da es 10 für jede Ladung gibt, daher sollte der Wert von i sein:

i = 10*clickNum, dies ist der Indexwert der jeweils ersten geladenen Daten. Auf diese Weise haben wir das oben genannte Problem gelöst.

Zu diesem Zeitpunkt muss noch ein Problem gelöst werden. Wenn zum Laden aller Daten geklickt wird, muss die angeklickte Schaltfläche ausgeblendet werden. ? ?

Wir können es anhand der Anzahl der Klicks clickNum berechnen, da jedes Mal 10 geladen werden, sodass wir die Gesamtzahl der Male berechnen können, die geladen werden müssen parseInt((data.list.length)/10) +1, warum wird es geladen? Wie wäre es mit der Addition von 1 zur Anzahl der Male?

Weil parseInt() gerundet ist, z. B. 21/10=2, aber tatsächlich dreimal geladen werden muss, muss also 1 hinzugefügt werden. Zufälligerweise müssen wir beim ersten Laden nicht klicken , der Browser hat es bereits geladen.

Also clickNum = parseInt((data.list.length)/10), wenn clickNum == parseInt((data.list.length) /10) ist der Klick-Button ausgeblendet.

Die Idee ist grundsätzlich klar

二、实现功能

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+&#39;年&#39;+month+&#39;月&#39;+day+&#39;日&#39;;
htmltxt += &#39;<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

Das obige ist der detaillierte Inhalt vonSo erreichen Sie Ajax, ohne beim Klicken die Datenladeliste zu trennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!