Ajax はユーザー エクスペリエンスを向上させるために読み込み待機効果を実装します

今回は、ユーザーエクスペリエンスを向上させるためにAjaxの読み込み待機効果を実装するためのnotesを紹介します。実際のケースを見てみましょう。

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

。ナンセンスではありません。ページの [実行] をクリックして event(<a sceneid="@scene.ID" href="<a%20href=" http: target="_blank"> javascript<code>（<a sceneid="@scene.ID" href="<a%20href=" http: target="_blank">javascript</a>:void(0)" rel="external nofollow" <a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a>="build(this)">生成）

调用下面方法：

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  src="/static/imghwm/default1.png" data-src="/images/load.gif" class="lazy" alt="Ajax はユーザー エクスペリエンスを向上させるために読み込み待機効果を実装します" >');
   },
   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="/static/imghwm/default1.png" data-src="/image/' + localkey + '" class="lazy" alt="Ajax はユーザー エクスペリエンスを向上させるために読み込み待機効果を実装します" >');
   },
   complete: function () {
    $('#load').remove();
   }
  });
 }

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

beforeSend: function () { jqSender.hide().after('<img  src="/static/imghwm/default1.png" data-src="/images/load.gif" class="lazy" alt="Ajax はユーザー エクスペリエンスを向上させるために読み込み待機効果を実装します" >'); },

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

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

= "build(this)" >Generate)

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

rrreee 背景ページに渡されるパスは URL に設定されます。最も重要なことは rrreee

これを考慮する必要があります Ajax 非同期リクエストの特性、URL に対して ajax が実行されると、スレッドは実行のためにバックグラウンドにジャンプします、

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

このようにして、前に挿入された画像は次のようになりますロードに相当します。データが正常に返されたら、前のピクチャを削除し、complete:function() ステートメントに記述します。

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

POST リクエスト

を使用して WeChat QR コード

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

Ajax を使用する手順の詳細な説明

🎜Ajax() を使用してバックグラウンドと対話する

以上がAjax はユーザー エクスペリエンスを向上させるために読み込み待機効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。