Ajaxがデータを返す前のロード待ち効果の実装方法について-PHPチュートリアル-php.cn

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

小云云

リリース： 2023-03-18 11:14:01

オリジナル

2750 人が閲覧しました

いくつかのページをロードすると、それがわかります。待機中の読み込みページが表示されます。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(&#39;sceneid&#39;);
  $.ajax({
   type: &#39;post&#39;,
   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

これは、URL に対して ajax が実行されると、スレッドがバックグラウンドで実行されることを考慮する必要があります。

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

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

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