jQueryをベースにしたajax関連メソッドの包括的なまとめ

この記事では主に、jQuery の ajax に基づく関連メソッドの概要を紹介します。編集者はこれが非常に優れていると考えたので、皆さんの参考になれば幸いです。

前提条件

jqueryでのajaxメソッドと言えば、もちろん前提条件はjqueryの導入です。

<script></script>

具体的なメソッド

①load()

load()メソッドを使用してAjaxリクエストを通じてサーバーにデータをロードし、返されたデータを指定された要素に配置します。呼び出し形式は次​​のとおりです:

load(url, [data],[callback])

パラメータ url は読み込みサーバーのアドレス、オプションの data パラメータはリクエスト中に送信されるデータ、callback パラメータはデータリクエストが成功した後に実行されるコールバック関数です。

たとえば、「ロード」ボタンをクリックすると、指定されたページのコンテンツをロードするリクエストがサーバーに送信され、ロードが成功すると、データのコンテンツが

要素に表示されます。ボタンが使用できなくなります。下図のように

②getJSON()メソッドを使用してJSON形式のデータを非同期で読み込みます

getJSON()メソッドを使用してAjax非同期リクエストでサーバー内の配列を取得し、取得したデータを解析して表示します。このページでの呼び出し形式は次​​のとおりです:

jQuery.getJSON(url,[data],[callback]) または $.getJSON(url,[data],[callback])

ここで、url パラメーターはリクエストです。 json 形式ファイルをロードするためのサーバー アドレス。オプションの data パラメーターは、リクエスト中に送信されるデータです。callback パラメーターは、データ リクエストが成功した後に実行されるコールバック関数です。

たとえば、ページ上の「読み込み」ボタンをクリックし、getJSON()メソッドを呼び出してサーバー上のJSON形式ファイルのデータを取得し、データをトラバースして指定したフィールド名の内容をページに表示します。以下の図に示すように:

③ getScript() メソッドを使用して、js ファイルを非同期にロードして実行します。

getScript() メソッドを使用して、サーバー内の JavaScript 形式のファイルを非同期にリクエストして実行します。次のように:

jQuery.getScript(url,[callback]) または $.getScript(url,[callback])

パラメータ url はサーバーリクエストのアドレスであり、オプションのコールバックパラメータはリクエストの後に実行されるコールバック関数です成功です。

たとえば、次の図に示すように、「ロード」ボタンをクリックし、getScript()を呼び出して指定された名前のJavaScript形式ファイルをサーバーにロードして実行し、ロードされたデータの内容をページに表示します。

ブラウザに表示される 効果:

④get()メソッドを使用してGETモードでサーバーからデータを取得します

get()メソッドを使用する場合、GETメソッドはサーバーからデータをリクエストするために使用され、リクエストされたデータは、メソッドのコールバック関数のパラメータを通じて返されます。その呼び出し形式は次​​のとおりです:

$.get(url,[callback])

パラメータの URL はサーバーリクエストのアドレスであり、オプションのコールバックです。パラメータは、リクエストが成功した後に実行されるコールバック関数です。

たとえば、「ロード」ボタンをクリックすると、get() メソッドが呼び出され、GET モードでサーバー内の .php ファイルからデータをリクエストし、返されたデータの内容がページに表示されます (以下を参照)。次の図:

⑤POSTモードでサーバーからデータを送信するには、post()メソッドを使用します

get()メソッドと比較して、post()メソッドは、POSTモードでサーバーにデータを送信するためによく使用されますサーバーはデータを受信した後、それを処理し、結果をページに返します:

$.post(url,[data],[callback])

url はサーバーリクエストのアドレス、オプションのデータはサーバーリクエスト時に送信されるデータ、オプションのコールバックパラメータはリクエストが成功した後に実行されるコールバック関数です。

たとえば、入力ボックスに数値を入力し、「検出」ボタンをクリックし、post() メソッドを呼び出して POST モードでサーバーにリクエストを送信し、入力値のパリティを検出して、それを画面に表示します。以下の図に示すように、ページを作成します。

⑥serialize() メソッドを使用してフォーム要素の値をシリアル化します

serialize() メソッドを使用して、フォーム内の name 属性で要素の値をシリアル化し、標準を生成しますURL エンコードされたテキスト文字列。Ajax リクエストに直接使用できます。呼び出し形式は次​​のとおりです:

$(selector).serialize()

ここで、selector パラメーターはフォーム内の 1 つ以上の要素またはフォーム要素です。自体。

たとえば、以下の図に示すように、フォームに複数の要素を追加し、「シリアル化」ボタンをクリックして、serialize() メソッドを呼び出して、ページ上のフォーム要素によってシリアル化された標準の URL エンコードされたテキスト文字列を表示します。 :

ブラウザでの表示効果:

⑦ajax()メソッドを使用してサーバーデータをロードします

ajax() メソッドの使用は、サーバーから返されたデータを取得するだけでなく、サーバーにリクエストを送信して値を渡すこともできます。その呼び出し形式は次​​のとおりです。

jQuery.ajax([settings]) または $.ajax([settings])

パラメータ settings は、ajax リクエストを送信するときの設定オブジェクトで、url はサーバーによって要求されたパスを表します。 dataType はサーバーから返されるデータ型、success はリクエストが正常に実行されたときのコールバック関数、type はデータリクエストの送信メソッド、デフォルトは get です。

たとえば、以下の図に示すように、ページ上の「ロード」ボタンをクリックし、ajax() メソッドを呼び出してサーバーに txt ファイルをロードするように要求し、返されたファイルの内容をページに表示します。

⑧使用 ajaxSetup() メソッドは、グローバル Ajax デフォルト オプションを設定します

ajaxSetup() メソッドは、設定が完了した後、後続の Ajax リクエストのグローバル オプション値を設定するために使用できます。これらのオプション値を追加する必要はありません。呼び出し形式は次​​のとおりです:

jQuery.ajaxSetup([options]) または $.ajaxSetup([options])

オプションの options パラメータは、これを介してグローバル オプション値を取得します。 Ajaxリクエストが設定されます。

たとえば、最初に ajaxSetup() メソッドを呼び出してグローバル Ajax オプション値を設定し、次に 2 つのボタンをクリックしてそれぞれ ajax() メソッドを使用して異なるサーバー データをリクエストし、ページにデータ コンテンツを表示します。下図:

⑨ajaxStart() メソッドと ajaxStop() メソッドを使用する

ajaxStart() メソッドと ajaxStop() メソッドは、Ajax イベントをバインドします。 ajaxStart() メソッドは、Ajax リクエストが発行される前に関数をトリガーするために使用され、ajaxStop() メソッドは、Ajax リクエストが完了した後に関数をトリガーするために使用されます。呼び出し形式は

$(selector).ajaxStart(function()) と $(selector).ajaxStop(function()) です

このうち、両方のメソッドの括弧は、Ajax を送信するときにバインドされた関数です。 ajaxStart() メソッドによってバインドされた関数がリクエストの前に実行されます。リクエストが成功した後、ajaxStop() メソッドによってバインドされた関数が実行されます。

たとえば、ajax() メソッドを呼び出してサーバー データをリクエストする前に、アニメーションを使用してリクエストが成功すると、次の図に示すようにアニメーションが自動的に非表示になります。ブラウザでの結果:

図からわかるように、アニメーション要素は ajaxStart() メソッドと ajaxStop() メソッドを使用してバインドされているため、Ajax リクエストの送信が開始されると要素が表示されます。リクエストが完了すると、アニメーション要素は自動的に非表示になります。

関連する推奨事項:

jQuery の ajax() メソッドの詳細な紹介

jQuery の ajax 属性 async の詳細な例

JQuery の Ajax 構文例の概要

以上がjQueryをベースにしたajax関連メソッドの包括的なまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。