Ajaxがデータを返す前に読み込み待機アニメーション効果を与える方法

今回は、Ajax がデータを返す前に、読み込み待ちのアニメーション効果を作成する方法を説明します。Ajax がデータを返す前に注意する必要がある注意事項は何ですか。実際のケースを見てみましょう。

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

。ページ上でクリック イベント を実行 (<a sceneid="@scene.ID" href="<a href="http://www.php.cn/wiki/48.html" target=) "_blank">javascript<p style="text-align: left;"> :void(0)" rel="external nofollow" <a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick<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>）

调用下面方法：

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

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

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

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

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

次のメソッドを呼び出します:

rrreee

背景ページは書きません。背景に渡されるパスは URL に設定されます。重要なことはrrreeeこれはajaxの非同期を考慮する必要があります。リクエストの特性により、ajaxがURLに対して実行されると、スレッドは実行のためにバックグラウンドにジャンプします

ブラウザはスレッドを追加します（私は追加しません）。これが標準かどうかを知ってください) 後続のプログラムの実行を続行するには、 success: function (data)Pause し、背景がデータを正常に返すのを待ちます

このように、前に挿入された画像は同等ですデータが正常に返されたら、前の画像を削除し、complete:function() ステートメントに記述します。

私のバックグラウンド処理フローは大まかに次のようなものです: まず、http GET リクエストを作成して WeChat パブリック プラットフォームの access_token を取得し、次に http POST リクエスト を使用して WeChat QR コード

と引き換えにチケットを取得します。次に、WebClient メソッドを使用して、要求された QR コードをローカル ストレージにダウンロードし、データベースを追加、削除、確認、変更し、Web ページに QR コードを表示します。

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

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

CORS を使用して WebApi Ajax クロスドメイン リクエストを実装する方法🎜🎜🎜🎜🎜Ajax がコンボ ボックスの動的読み込みを実装する方法 (コード付き)🎜🎜🎜

以上がAjaxがデータを返す前に読み込み待機アニメーション効果を与える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。