Warteeffekt laden, bevor Ajax Daten zurückgibt (grafisches Tutorial)

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 erfolgreich zurückgegeben werden. Als nächstes werde ich Ihnen in diesem Artikel den Ladewarteeffekt mitteilen, bevor Ajax Daten zurückgibt. Freunde, die sie benötigen, können darauf verweisen

Zuerst übergeben wir die Parameter über die Ajax-Anfrage an den Hintergrund und dann Der Hintergrund übergibt eine Reihe von Vorgängen an die Vorderseite. Geben Sie die Daten zurück. Ich hoffe, dass ich ein Loading.gif anzeigen kann, bevor ich auf die erfolgreiche Rückgabe der Daten warte.

Kein Unsinn, führen Sie das Klickereignis auf der Seite aus （86ccaefec7710717dc44addbe1314ffd生成5db79b134e9f6b82c0b36e0489ee08ed )

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

Der an den Hintergrund übergebene Pfad wird in der URL konfiguriert. Das Wichtigste ist

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

Dies sollte die Eigenschaften asynchroner Ajax-Anfragen berücksichtigen, wenn Ajax an die URL ausgeführt wird Hintergrund für die Ausführung.

Der Browser fügt einen Thread hinzu (ich weiß es nicht). Der Standard ist also nicht Standard.) Führen Sie das folgende Programm weiter aus und warten Sie dann, bis der Hintergrund erfolgreich Daten zurückgibt success: function (data)

Auf diese Weise entspricht das zuvor eingefügte Bild einem Ladevorgang. Wenn die Daten erfolgreich zurückgegeben werden, werden die zuvor eingefügten Bilder entfernt und in die Anweisung „complete: function()“ geschrieben.

Mein Verarbeitungsablauf im Hintergrund 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die Ajax.load()-Methode in jQuery

Ajax+ PHP für Dateninteraktion (mit Code)

Ajax+Struts2 empfängt Array-Form (mit Code)

Das obige ist der detaillierte Inhalt vonWarteeffekt laden, bevor Ajax Daten zurückgibt (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!