Ajax implementiert den Lade-Warteeffekt, um die Benutzererfahrung zu verbessern-js-Tutorial-php.cn

Ajax implementiert den Lade-Warteeffekt, um die Benutzererfahrung zu verbessern

php中世界最好的语言

Freigeben： 2018-04-24 17:04:49

Original

2558 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen Ajax, um den Ladewarteeffekt zu implementieren, um die Benutzererfahrung zu verbessern. Was sind die Vorsichtsmaßnahmen ? Hier ist ein praktischer Fall.

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 Klick--Ereignis auf der Seite aus (<a sceneid="@scene.ID" href="<a href="http:/ /m.sbmmt.com/ wiki/48.html" target="_blank">javascript<code>（<a sceneid="@scene.ID" href="<a href="//m.sbmmt.com/wiki/48.html" target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="//m.sbmmt.com/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();
   }
  });
 }

Nach dem Login kopieren

Die Hintergrundseite wird nicht geschrieben, der an den Hintergrund übergebene Pfad ist in der URL konfiguriert. Das Wichtigste ist

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

Nach dem Login kopieren

Dies sollte die Eigenschaften asynchroner Ajax-Anfragen berücksichtigen Zur URL springt ein Thread in den Hintergrund.

success: function (data) Der Browser fügt einen Thread hinzu (ich weiß nicht, ob das Standard ist), um mit der Ausführung des nachfolgenden Programms fortzufahren, und

pausiert Warten Sie, bis der Hintergrund erfolgreich Daten zurückgibt

Auf diese Weise entspricht das darin eingefügte Bild einem Ladevorgang. Wenn die Daten erfolgreich zurückgegeben werden, entfernen Sie das Bild im Inneren und schreiben Sie es in die Funktion „complete:“. () Stellungnahme.

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 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:

Detaillierte Erklärung der Schritte zur Verwendung von Ajax

Detaillierte Erklärung der Interaktion zwischen Ajax() und der Hintergrund

Detaillierte Erläuterung der Schritte für jQuery zur Verwendung von Ajax zum Abrufen domänenübergreifender Daten

Das obige ist der detaillierte Inhalt vonAjax implementiert den Lade-Warteeffekt, um die Benutzererfahrung zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!