Ajaxがデータを返す前のロード待ち効果の実装方法について

いくつかのページをロードすると、それがわかります。待機中の読み込みページが表示されます。ajax リクエストを通じてバックエンドにパラメータを渡し、一連の操作の後にデータをフロントエンドに返します。データが返されるのを待つ前に、loading.gif を表示したいと考えています。成功しました。次に、この記事を通して、Ajax がデータを返すまでの読み込み待機効果を共有します。それを必要とする友人がそれを参照できるようにします。

ナンセンスではありません。ページ (<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)) でクリック イベントを実行します。 " >Generate</a>) （<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>）

调用下面方法：

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

后台页面就不写了，url中配置了传递到后台的路径，最主要的就是

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

这要考虑到ajax异步请求的特点，当ajax执行到url的时候，会有一个线程跳转到后台去执行，

浏览器会增加一个线程（不知道这么说标不标准）继续执行后面的程序，到success: function (data)

rrreee

rrreee

ブラウザはスレッドを追加し (これが標準かどうかはわかりません)、success: function (data) に移動して一時停止して待機します。データを正常に返すための背景

このようにして、以前に挿入された画像は非常に良くなります。 したがって、ロードの場合、データが正常に返された場合、以前の画像は削除され、complete: function () ステートメントに書き込まれます。 私のバックグラウンド処理フローは大まかに次のとおりです: まず、http GET リクエストを作成して WeChat パブリック プラットフォームの access_token を取得し、次に http POST リクエストを使用して WeChat QR コードと引き換えにチケットを取得します

その後、次を使用しますWebClient メソッドでリクエストを行います。取得した QR コードはローカル ストレージにダウンロードされ、データベースの追加、削除、確認、変更が行われ、Web ページに QR コードが表示されます。 このように長い時間があれば、読み込み時間が比較的短い場合は、読み込みが完全に表示されるまでの時間が定義されているかどうかをオンラインで確認できます。唐突すぎる。

関連する推奨事項:

以上がAjaxがデータを返す前のロード待ち効果の実装方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。