ホームページ > ウェブフロントエンド > jsチュートリアル > .ajax() ブロックの外側で jQuery AJAX 成功コールバック関数を定義する方法

.ajax() ブロックの外側で jQuery AJAX 成功コールバック関数を定義する方法

DDD
リリース: 2024-10-18 19:23:29
オリジナル
352 人が閲覧しました

How to Define jQuery AJAX Success Callback Function Outside of .ajax() Block?

.ajax() ブロック外の jQuery AJAX 成功コールバック関数の定義

jQuery では、$ を使用してサーバーからデータを取得できます。 ajax()メソッド。通常、成功コールバック関数は .ajax() ブロック内で定義されます。ただし、ブロックの外でコールバックを定義することは可能です。

.ajax() ブロックの外でのコールバック関数の定義

.ajax() ブロックの外で成功コールバックを定義するには、.ajax() ブロックの外でコールバックを定義します。 ajax() ブロックでは、次のように $.ajax() の結果を返す必要があります:

<code class="javascript">function getData() {
    return $.ajax({
        url: 'example.com',
        type: 'GET'
    });
}</code>
ログイン後にコピー

その後、 .done() メソッドを使用して .ajax() 呼び出しの外側にコールバックを追加できます。 :

<code class="javascript">getData().done(handleData);</code>
ログイン後にコピー

データの処理

handleData 関数は次のように定義できます:

<code class="javascript">function handleData(data) {
    alert(data);
    // Do other stuff
}</code>
ログイン後にコピー

handleData 関数に渡されるデータはサーバーから返されたデータです。

.ajax() ブロックの外側でコールバックを定義する利点

.ajax() ブロックの外側でコールバックを定義すると、いくつかのメリットが得られます。利点:

  • AJAX 処理をコールバック処理から分離します。
  • 複数のコールバック、エラー ハンドラーなどを追加できます。
  • 複数の非同期イベントの同期を容易にします。

次のコードは、この手法の使用方法を示しています。

<code class="javascript">// A trivial timer for demo purposes
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// Add a `done` and an `error` handler to the AJAX call
var ajax = getData().done(handleData).fail(error);

// Wait for both the AJAX call and the timer to finish
$.when(timer, ajax).done(function() {
    // Both operations have finished
});

// Add an additional `done` handler to the AJAX call
ajax.done(function() {
    // Can be added even if the AJAX call has already finished
});</code>
ログイン後にコピー

この手法は、AJAX 機能を後続のアクションから切り離したり、複数の非同期操作を同期したりする場合に役立ちます。

以上が.ajax() ブロックの外側で jQuery AJAX 成功コールバック関数を定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート