jQuery学習メモ - Ajaxの操作(3) - 処理処理_jquery-jsチュートリアル-php.cn

jQuery学習メモ - Ajaxの操作(3) - 処理処理_jquery

WBOY

リリース： 2016-05-16 16:43:12

オリジナル

1306 人が閲覧しました

観測機能

観測関数としてajaxStart関数とajaxStop関数を使用することができ、観測関数のコールバック関数を利用して対応する処理を行うことができます。

ajaxStart のコールバック関数は、Ajax リクエストが開始され、他の送信が行われていないときにトリガーされます。
最後のアクティブなリクエストが終了すると、ajaxStop を通じて登録されたコールバック関数が実行されます。
観察関数はグローバルであるため、$(document) を使用して呼び出す必要があります。 Ajax メソッドを使用して 2 つの関数をテストし、画像の例を取得します。現在のページは:

<div></div>
<button>load</button>

ログイン後にコピー

同じディレクトリ内の test.html の内容は次のとおりです:

<img src="avatar.jpg" />

ログイン後にコピー

ボタンをクリックした後に画像をロードしたい:

 $('button').click(function() {
  $('div').load('test.html');
 });

ログイン後にコピー

この時点で、ajaxStart 関数と ajaxStop 関数を使用してプロンプトを追加できます。

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

ログイン後にコピー

この時点でボタンをクリックすると、画像をロードする前に画像のロードを促すメッセージが表示され、ロード後に画像が表示されます。

エラー処理

最も一般的に使用されるメソッドは、グローバル ajaxError メソッドです。例として、存在しないページにデータリクエストを送信するとします。

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

ログイン後にコピー

この時点でボタンをクリックした後:

非ロードメソッドの場合、連結処理にfailメソッドを使用することもできます:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

ログイン後にコピー

JSONP