ホームページ > 記事 > ウェブフロントエンド > jQuery Ajaxの使い方を詳しく解説（load、post、get、ajax）

jQuery Ajaxの使い方を詳しく解説（load、post、get、ajax）

小云云オリジナル: 2018-01-23 17:11:151055ブラウズ

この記事では主に、jQuery Ajax (load、post、get、ajax) の使用法について詳しく説明します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

今日、グループ内の何人かのネットユーザーが Jquery Ajax (load、post、get、ajax) の違いについて質問しているのを見かけました。まずは、いくつか見てみましょう。単純なメソッド、

これらのメソッドはすべて、使いやすくするために jQuery.ajax() をカプセル化するメソッドです。もちろん、複雑なロジックを処理したい場合は、引き続き jQuery.ajax() を使用する必要があります (これについては後で説明します)。 ) to).

1.load( url, [data], [callback] ): リモート HTML ファイルのコードをロードし、DOM に挿入します。

url (文字列): リクエストされた HTML ページの URL アドレス。

data (マップ): (オプションのパラメーター) サーバーに送信されるキー/値データ。

callback (コールバック): (オプションのパラメーター) リクエストが完了したときのコールバック関数 (成功する必要はありません)。

このメソッドはデフォルトで GET メソッドを使用します。[data] パラメーターにデータが渡された場合、自動的に POST メソッドに変換されます。 jQuery 1.2 では、セレクター

を指定して、ロードされた HTML ドキュメントをフィルター処理することができ、フィルターされた HTML コードのみが DOM に挿入されます。構文は「url #some > selector」のようなものです。

このメソッドは、フォームなどの一部の HTML ファイルを簡単に動的にロードできます。

サンプルコード:

$(".ajax.load").load("http:
//www.jb51.net",function (responseText, textStatus, XMLHttpRequest)
{this;//在这里this指向的是当前的DOM对象，
即$(".ajax.load")[0]
 //alert(responseText);
//请求返回的内容
/alert(textStatus);
//请求状态：success，error
//alert(XMLHttpRequest);
//XMLHttpRequest对象});

注: URLに絶対パスを書くとFFでエラーが発生する理由がわかりません。ご存知の方は教えてください。以下の get() および post() の例では絶対パスを使用しているため、FF ではエラーが発生し、返された結果は表示されません。クロスドメインと呼ばれる get() と post() の例もありますが、アップロード後に結果を取得する方法がないことがわかったので、実行ボタンを削除しました。

2. jQuery.get( url, [data], [callback] ): GET メソッドを使用して非同期リクエストを作成します

パラメータ:

url (文字列): リクエストを送信する URL アドレス。

data (マップ) : (オプション) サーバーに送信されるデータは、キーと値のペアの形式で表現され、QueryString としてリクエスト URL に追加されます。

callback (関数): (オプション) ロードが成功したときのコールバック関数 (このメソッドは、Response の戻りステータスが成功の場合にのみ呼び出されます)。

これは、複雑な $.ajax を置き換える単純な GET リクエスト関数です。コールバック関数は、リクエストが成功したときに呼び出すことができます。エラー時に関数を実行する必要がある場合は、$.ajax を使用します。

サンプルコード:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"},
function (data, textStatus)
{//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this; 
// 在这里this指向的是Ajax请求的选项配置信息，请参考下图alert(data);
//alert(textStatus);
//请求状态：success，error等等。

もちろん、エラーが発生するとコールバック関数はまったく実行されないため、ここでエラーを捕捉することはできません //alert(this);});

クリックしてリクエストを送信:

jQuery.get() callback 関数内のこれは、Ajax リクエストのオプション設定情報を指します:

3. jQuery.post( url, [data], [callback], [type] ): POST メソッドを使用します。非同期リクエストを行うための

パラメータ:

url (文字列): リクエストを送信する URL アドレス

data (マップ): (オプション) キー/値の形式で表される、サーバーに送信されるデータ。ペア。

type (文字列): (オプション) 公式の説明は次のとおりです: 送信されるデータのタイプ。実際には、クライアントによって要求されたタイプ (JSON、XML など) である必要があります

これは、複雑な $.ajax を置き換える単純な POST リクエスト関数です。コールバック関数は、リクエストが成功したときに呼び出すことができます。エラー時に関数を実行する必要がある場合は、$.ajax を使用します。

サンプルコード:

Ajax.aspx:

Response.ContentType = "application/json";Response.Write("{result: &#39;" + Request["Name"] + ",你好！(这消息来自服务器)&#39;}");

jクエリコード:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus)
{// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; 
// 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的thisalert(data.result);}, "json");

クリックして送信:

ここではリクエスト形式を「json」に設定しています:

リクエスト形式を「json」に設定すると、現時点では、Response によって返される ContentType を Response.ContentType = "application/json"; に設定していない場合、返されたデータをキャプチャできません。

alert(data.result); Accept ヘッダーが「json」に設定されているため、ここで返されるデータはオブジェクトであり、オブジェクトに変換するために eval() を使用する必要がないことに注意してください。

4. jQuery.getScript( url, [callback] ): GET メソッドを通じて JavaScript ファイルのロードと実行をリクエストします。

パラメータ

url (文字列): ロードされるJSファイルのアドレス。

callback (関数): (オプション) ロードが成功した後のコールバック関数。

jQuery 1.2 より前は、getScript は同じドメイン内の JS ファイルのみを呼び出すことができました。 1.2 では、ドメイン間で JavaScript ファイルを呼び出すことができます。注: Safari 2 以前では、グローバルスコープでスクリプトを同期的に実行できません。 getScriptでスクリプトを追加する場合は遅延関数を追加してください。

このメソッドは、たとえば、エディターのみが focus() である場合に、エディターに必要な JS ファイルをロードするために使用できます。

test.js をロードして実行します。

jQuery コード:

$.getScript("test.js");

AjaxEvent.js をロードして実行し、成功後に情報を表示します。

jQuery コード:

$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js がロードされ、実行されます。違いを確認するには、上の [取得] または [投稿] ボタンをクリックしていただけますか?") ;} );

jQuery Ajax イベント

Ajax リクエストは、サブスクライブしてロジックを処理できるいくつかの異なるイベントを生成します。 jQuery には、ローカルイベントとグローバルイベントという 2 種類の Ajax イベントがあります。

ローカルイベントは、各 Ajax リクエスト中にメソッド内で定義されます。例:

$.ajax({beforeSend: function(){// beforeSend イベントを処理する},complete: function(){// 完全なイベントを処理する}// ...});

グローバルイベントは、すべての Ajax リクエストによってトリガーされ、DOM 内のすべての要素にブロードキャストされます。グローバルイベントは次のように定義できます:

$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function(){ $( this).hide();});

or:

$("#loading").ajaxStart(function(){$(this).show();});

これができます特定のリクエストでグローバルイベントを無効にするには、グローバルオプションを設定するだけです:

$.ajax({url: "test.html",global: false,// グローバル Ajax イベントを無効にする。// ...});

jQuery Ajax の使用法 (load、post、get、ajax) に関する詳細な説明は、すべて編集者が共有した内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

jQuery Ajaxの使い方を詳しく解説（load、post、get、ajax）

関連記事