jQueryをベースにしたajax関連メソッドの包括的なまとめ-jsチュートリアル-php.cn

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

小云云

リリース： 2017-12-23 10:59:42

オリジナル

1510 人が閲覧しました

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

前提条件

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

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></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() メソッドを呼び出してサーバーデータをリクエストする前に、アニメーションを使用してリクエストが成功すると、次の図に示すようにアニメーションが自動的に非表示になります。ブラウザでの結果: