Ajax がデータを返す前に待機エフェクトをロードする (グラフィック チュートリアル)

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

まず、Ajax リクエストを通じてバックグラウンドにパラメーターを渡し、次にバックグラウンドがデータを返します。一連の操作の後、データが正常に返されるのを待つ前に、loading.gif を表示したいと考えています

ナンセンスです。ページ (<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 です。

このように、前に挿入された画像はロードに相当しますデータが正常に返されたら、前の画像を削除し、complete: function () ステートメントに記述します。 私のバックグラウンド処理フローは大まかに次のとおりです: まず、http GET リクエストを作成して WeChat パブリック プラットフォームの access_token を取得し、次に http POST リクエストを使用して WeChat QR コードと引き換えにチケットを取得します
その後、次を使用しますWebClient メソッドでリクエストを行います。取得した QR コードはローカル ストレージにダウンロードされ、データベースの追加、削除、確認、変更が行われ、Web ページに QR コードが表示されます。

このように長い時間があれば、読み込みが表示されるまでに十分な時間が与えられます。時間が比較的短い場合は、読み込みが完全に表示されるように時間が定義されているかどうかをオンラインで確認できます。唐突すぎる。 上記は私があなたのためにまとめたものです。

jQueryで
ajax

Ajax+PHPによるデータ対話(コード付き)

以上がAjax がデータを返す前に待機エフェクトをロードする (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。