So erstellen Sie einen Lade-Warte-Animationseffekt, bevor Ajax Daten zurückgibt

Dieses Mal zeige ich Ihnen, wie Sie einen Lade-Warte-Animationseffekt erstellen, bevor Ajax Daten zurückgibt. Was sind die Vorsichtsmaßnahmen, um einen Lade-Warte-Animationseffekt zu erstellen, bevor Ajax Daten zurückgibt . Steh auf und schau es dir an.

Zuerst übergeben wir 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 vorliegen erfolgreich zurückgegeben

Kein Unsinn, führen Sie das Klickereignis auf der Seite aus (<a sceneid="@scene.ID" href="<a href="http://www.php.cn /wiki/48.html" target="_blank">javascript<code>（<a sceneid="@scene.ID" href="<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>="build(this)">生成</a>:void(0)" rel="external nofollow" onclick

="build(this)">Generate)

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

Die Die Hintergrundseite schreibt die URL nicht. Das Wichtigste ist, dass bei der Ausführung von Ajax die Eigenschaften berücksichtigt werden URL, ein Thread springt zur Ausführung in den Hintergrund,

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

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

Halten Sie an und warten Sie, bis der Hintergrund die Daten erfolgreich zurückgibt.

success: function (data)Auf diese Weise fügen Sie das Bild ein, bevor es geladen wird. Wenn die Daten erfolgreich zurückgegeben werden, entfernen Sie das Bild vorher und schreiben Sie es vollständig ein: function()-Anweisung.

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 die http-

POST-Anfrage

, um im Gegenzug das Ticket zu erhalten für den WeChat-QR-Code. 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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So implementieren Sie eine domänenübergreifende WebApi-Ajax-Anfrage mit CORS

So implementieren Sie das dynamische Laden von Kombinationsfelder mit Ajax (mit Code)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Lade-Warte-Animationseffekt, bevor Ajax Daten zurückgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!