Informationen zur Implementierungsmethode zum Laden des Warteeffekts, bevor Ajax Daten zurückgibt

Das wissen wir alle, wenn wir einige Seiten laden. Es erscheint eine wartende Ladeseite. Wir übergeben Parameter über eine Ajax-Anfrage an das Backend, und dann gibt das Backend die Daten nach einer Reihe von Vorgängen an das Frontend zurück. Ich hoffe, dass eine Datei „loading.gif“ angezeigt wird, bevor die Daten zurückgegeben werden erfolgreich. Als nächstes werde ich Ihnen in diesem Artikel den Ladewarteeffekt mitteilen, bevor Ajax Daten zurückgibt, die darauf verweisen können.

Kein Unsinn, führen Sie das Klickereignis auf der Seite aus （<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>)

Rufen Sie die folgende Methode auf:

function build(sender) {
  var jqSender = $(sender);
  var sceneid = jqSender.attr('sceneid');
  $.ajax({
   type: 'post',
   url: "Follow/UpdateUrl",
   data: { sceneid: sceneid },
   beforeSend: function () {
    jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;);
   },
   success: function (data) {
    //根据id和class获取td标签
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.wxurl-col&#39;).html(data.QRUrl);
    $(&#39;tbody tr[id=&#39; + sceneid + &#39;] td.localkey-col&#39;).html(data.LocalKey);
    //隐藏生成按钮，插入图片
    var localkey = data.LocalKey;
    jqSender.after(&#39;<img src="/image/&#39; + localkey + &#39;" />&#39;);
   },
   complete: function () {
    $(&#39;#load&#39;).remove();
   }
  });
 }

Die Hintergrundseite ist, dass ich es nicht mehr schreiben werde. Das Wichtigste ist:

beforeSend: function () { jqSender.hide().after(&#39;<img id="load" src="/images/load.gif" />&#39;); },

Berücksichtigen Sie die Eigenschaften asynchroner Ajax-Anfragen. Wenn eine URL eingegeben wird, springt ein Thread zur Ausführung in den Hintergrund.

Der Browser fügt einen Thread hinzu (ich weiß nicht, ob dies Standard ist). ), um mit der Ausführung des nachfolgenden Programms fortzufahren, und dann

pausiert und wartet auf den Erfolg der Hintergrunddaten success: function (data)

Auf diese Weise entspricht das zuvor eingefügte Bild einem Laden der Daten Wird erfolgreich zurückgegeben, entfernen Sie das Bild davor und schreiben Sie es in die Anweisung „complete: function()“.

Mein Hintergrundverarbeitungsablauf sieht ungefähr so ​​aus: Stellen Sie zunächst eine http-GET-Anfrage, um das access_token der öffentlichen WeChat-Plattform zu erhalten, und verwenden Sie dann eine http-POST-Anfrage, um das Ticket im Austausch gegen den WeChat-QR-Code zu erhalten

Verwenden Sie dann die WebClient-Methode, um den angeforderten QR-Code in den lokalen Speicher herunterzuladen, und fügen Sie dann die Datenbank hinzu, löschen Sie sie, überprüfen Sie sie und ändern Sie sie, um den QR-Code auf der Webseite anzuzeigen.

Ein so langer Zeitraum lässt genügend Zeit für die Anzeige der Beladung zu. Wenn die Zeit relativ kurz ist, können Sie online prüfen, ob eine Zeit definiert wurde, damit die Beladung vollständig angezeigt werden kann um nicht zu abrupt zu sein.

Verwandte Empfehlungen:

Anleitung zum Laden der Animationsmethode für die WeChat-Applet-Ladekomponente

So lösen Sie mehrere Ajax-Seiten Anfrage, Problem beim Blockieren des Ladens der Seite

Was sind die Ladeanimationen?

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierungsmethode zum Laden des Warteeffekts, bevor Ajax Daten zurückgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!