$ .ajax()と$ .get()と$ .load()の違い


回答:


241

$.ajax()HTTPヘッダーなどをきめ細かく制御できる最も設定可能なものです。このメソッドを使用して、XHRオブジェクトに直接アクセスすることもできます。もう少し細かいエラー処理も提供されます。したがって、より複雑になり、多くの場合は不要になりますが、非常に役立つことがあります。返されたデータはコールバックで自分で処理する必要があります。

$.get()は省略形です$.ajax()が、構成の一部を抽象化し、非表示にする適切なデフォルト値を設定します。データをコールバックに返します。GETリクエストのみを許可するため$.post()、POSTの場合のみ、同様の抽象化のための関数が付随します

.load() と類似しています $.get()いますが、ドキュメントのどこに戻りデータを挿入するかを定義できる機能が追加されています。したがって、実際には、呼び出しのみがHTMLになる場合にのみ使用できます。特定のjQueryでラップされたDOM要素に関連付けられたメソッドであるため、他のグローバルな呼び出しとは少し異なります。したがって、次のようにします。$('#divWantingContent').load(...)

すべてのことに留意すべきである$.get()$.post().load()のためにすべてのちょうどラッパーです$.ajax()それは内部的に呼ばれていますよう。

jQueryのAjaxドキュメントの詳細:http : //api.jquery.com/category/ajax/


3
@UzairAliいいえ、渡した変数を文字通り受け取り、jQuery.ajax()を実行するためにそれらを使用します
lisburnite

1
すばらしい、.load()は単なるHTMLであり、.get()はより多くのことに役立ちます。
Luigi Lopez

30

メソッドは、抽象化のさまざまな層を提供します。

  • $.ajax()Ajaxリクエストを完全に制御できます。他の方法でニーズが満たされない場合は、この方法を使用してください。

  • $.get()Ajax GETリクエストを実行します。返されたデータ(任意のデータ)がコールバックハンドラーに渡されます。

  • $(selector).load()Ajax GETリクエストを実行し、選択された返されたデータ(テキストまたはHTMLのいずれか)のコンテンツを設定します。

どの方法を使用するかは状況によって異なります。簡単なことをしたい場合は、気にする必要はありません$.ajax()

たとえば$.load()、返されたデータがJSONであり、さらに処理する必要がある場合は、を使用しません。ここでは、$.ajax()またはを使用します$.get()


9

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

説明:非同期HTTP(Ajax)リクエストを実行します。

完全なモンティでは、あらゆる種類のAjaxリクエストを作成できます。


http://api.jquery.com/jQuery.get/

jQuery.get()

説明:HTTP GETリクエストを使用してサーバーからデータをロードします。

HTTP GETリクエストのみを行うことができ、必要な設定は少し少なくなります。


http://api.jquery.com/load/

.load()

説明:サーバーからデータを読み込み、返されたHTMLを一致した要素に配置します。

データを取得して要素に挿入するために特化しています。


8

非常に基本的ですが

  • $.load():htmlの一部をコンテナーDOMにロードします。
  • $.get()GET呼び出しを行い、応答を広範囲に再生する場合に使用します。
  • $.post()POST呼び出しを行い、コンテナDOMへの応答をロードしたくない場合は、これを使用します。
  • $.ajax():XHRが失敗したときに何かを行う必要がある場合、またはその場でajaxオプション(たとえば、キャッシュ:true)を指定する必要がある場合は、これを使用します。

5

重要な注意: データパラメータが指定されている場合、jQuery.load()メソッドはGETだけでなくPOSTリクエストも実行できます(http://api.jquery.com/load/を参照)

data型:PlainObjectまたはStringリクエストとともにサーバーに送信されるプレーンオブジェクトまたは文字列。

RequestメソッドPOSTメソッドは、データがオブジェクトとして提供される場合に使用されます。それ以外の場合は、GETが想定されます。

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

3

誰もがそれを正しく持っています。関数は.load.get、および.post、機能を使用してのさまざまな方法です.ajax

個人的には、.ajaxのraw関数は非常に混乱していると思います。必要に応じて、load、get、postを使用することを好みます。

POSTの構造は次のとおりです。

$.post(target, post_data, function(response) { });

GETには以下があります。

$.get(target, post_data, function(response) { });

LOADには次のものがあります。

$(*selector*).load(target, post_data, function(response) { });

ご覧のとおり、どちらを使用するかが状況によって決まるため、両者の違いはほとんどありません。内部でファイルに情報を送信する必要がありますか?.postを使用します(これがほとんどの場合です)。特定の瞬間へのリンクを提供できるような方法で情報を送信する必要がありますか?.getを使用します。どちらも、ファイルの応答を処理できるコールバックを許可します。

重要な注意点は、.loadは2つの異なる方法で機能することです。ターゲットドキュメントのURLのみを提供する場合、それはgetとして機能します(そして、$_POSTデフォルトの.load動作を使用しているときに呼び出されたPHPでチェックをテストし、それを検出するため$_POST$_GET、ます。おそらくより正確になるでしょう引数なしで.postとして機能するとします); ただし、http://api.jquery.com/load/つまり、関数に引数の配列を提供すると、情報がファイルにPOSTされます。いずれの場合でも、.load関数は情報をDOM要素に直接挿入します。DOM要素の多くは、非常に読みやすく、非常に直接的です。ただし、応答でさらに何かを実行したい場合は、コールバックを提供します。さらに、.loadを使用すると、ファイルから特定のコードブロックを抽出して、カタログをHTMLファイルなどに保存し、その一部(アイテム)を直接DOM要素に取得することができます。



1

どちらも、データを送信し、そのデータを使用して応答を受信するために使用されます。

GET:サーバーに保存されている情報を取得します。(つまり、検索、ツイート、個人情報)。情報を送信したい場合は、リクエストを使用してリクエストをprocess.php?name=subroto送信します。基本的に、URLを介して情報を送信します。URLは2036文字以上を処理できません。ブログ投稿の場合、それは不可能であることを覚えていますか?

POST:PostはGETと同じことを行います。ユーザー登録、ユーザーログイン、ビッグデータ送信、ブログ投稿。安全な情報を送信する必要がある場合は、URLを経由しないので、投稿またはビッグデータに使用します。

AJAX$.get()およびの$.post()サブセットである機能が含まれています$.ajax()。より多くの設定があります。

$.get ()メソッド。これは、の短縮形の一種です$.ajax()。を使用する場合$.get ()は、オブジェクトを渡す代わりに、引数を渡します。少なくとも、最初の2つの引数が必要です。これは、取得するファイルのURL(例:test.txt)と成功コールバックです。


0

誰もがそのトピックを非常によく説明しました。.load()メソッドについて追加したい点がもう1つあります。

ロードドキュメントに従って 、データURLに接尾辞付きのセレクターを追加すると、コンテンツのロード時にスクリプトが実行されません。

ワーキングプランカー

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

一方、URLのセレクターを削除すると、新しいコンテンツのスクリプトが実行されます。この例を試してください

index.htmlファイルのurlの#contentを削除した後

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

議論中の他の方法によって提供されるそのような組み込みの機能はありません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.