Ajaxグローバルローディングボックスの構成（ローディング効果）-jsチュートリアル-php.cn

Ajaxグローバルローディングボックスの構成（ローディング効果）

亚连

リリース： 2018-05-23 15:51:55

オリジナル

2978 人が閲覧しました

この記事は、Ajax グローバルローディングボックス (ローディング効果) の構成に関する関連情報を主に紹介しています。非常に優れており、必要な友人は参照できます。

Ajax がバックグラウンドデータリクエストを行うプロセスでは、現時点では、ページの背景がまだ何かを行っていることをユーザーに知らせることができるように、プログレスバーと呼ばれるものをユーザーに提供する必要があります

実装原則:

Jquery は、グローバル Ajax 設定を実行して、C# と同様のアスペクト指向の効果を実現できます。つまり、送信前と送信完了後に Ajax で一連の操作を実行できるため、Ajax の開始時に読み込みボックスを表示できます。 ajax リクエストが完了したら、ローディングボックスを閉じます。これにより、基本的にこの効果が完全に達成されます。

Jquery で Ajax をグローバルに設定する方法は次のとおりです:

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

ログイン後にコピー

もちろん、これらの送信/完了/エラーの設定を 1 つの ajax で設定して、公開ページに置くこともできます。、彼はグローバルです〜

最後に、コードを提示してください。便宜上、私はレイヤープラグインを直接使用して読み込み効果を実現し、CSSを手動で記述しませんでした。結局のところ、これは私たちの強みではありません~私には能力があります学生は自分でローディングエフェクトを記述し、jsを使用してその表示と非表示を手動で制御できます。直接コピーしたい場合は、レイヤーとポータルを導入してください: http:// layer.layui.com/

こちら説明する必要があるのは、同時に複数の ajax がある場合、1 つがロードされ、他はオフになる可能性があるということです。これについては、次の 2 つが考えられます。解決策:

■私の現在の解決策は、彼に複数のものを開かせて(座標はすべて同じで表示されません)、最後に終了したものを閉じることです。ここで私が行うことは、ajaxSetupにインデックスパラメータを追加することです(これ。セットされたオブジェクトにのみ書き込むことができます。それ以外の場合、すべての ajax はインデックスを使用して同じものを共有します)。

■この制御ロジックを自分で書くのに適した別の解決策は、

、開始または終了するたびに ajax-cout の値を維持し、data-ajax-count が 0 以下の場合に ajax の終了を判断します。 p 、できるはずですが、私はこの方法を実践していません。

$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, &#39;#393D49&#39;] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert(&#39;部分数据加载失败，可能会导致页面显示异常，请刷新后重试&#39;, {
skin: &#39;layui-layer-molv&#39;
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});