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

この記事は、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, '#393D49'] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert('部分数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

以上、皆さんの参考になれば幸いです。

関連記事:

Ajaxのループスキーム

BootstrapのDatePickerの日付範囲選択に関する簡単な説明

dom4jでXPathを使用する簡単な例

以上がAjaxグローバルローディングボックスの構成（ローディング効果）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。