jQueryを使ったネットワーキング

9.1 jQueryの$オブジェクトとajaxメソッド

jQuery には、ネットワークを操作するための特別なグローバル オブジェクトもあります。ご想像のとおり、それは と呼ばれます$。はい、それが名前です。でもシンプルで便利ですね。

JavaScript で API にリクエストを送信し、受け取ったレスポンスを処理したいとします。これは次のようにして実行できます。

$.ajax({
  type: "POST",
  url: "api.codegym.cc",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

以上です。コードはこれですべてです。object の$メソッドを呼び出しajax()、必要なものすべて (リクエストとレスポンスの両方) を記述するオブジェクトを渡します。

• このフィールドはtypeHTTP リクエストのタイプを指定します。GETまたはPOST
• このフィールドは、リクエストの送信先をurl指定します。url
• フィールドにはdataリクエストデータをJSON形式で指定します。
• success フィールドは、サーバーからの成功応答後に呼び出される関数を指定します。

9.2 便利なクエリ

ただし、データを転送する必要がない場合は、リクエストをさらに短く書くことができます。たとえば、次のような単純なPOST リクエストを作成できます。

$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

コードが何をするか知っていますか$( ".result" ).html( data );? 推測してみましょう...

ドキュメント内の結果クラスを持つ要素を検索し、その中に HTML コード ( data ) を追加しますdata。したがって、数行でサーバーからデータをダウンロードし、ページに追加できます。まあ、それは美しさではありませんか？:)

GET リクエストは数行で記述することもできます。

$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

スクリプトをダウンロードして実行しますか?

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

最新の HTML ページを入手しますか?

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

インターネット上には、非常に優れた jQuery ドキュメントがいくつかあります。

jQuery API

jQuery.ajax()

さらに、よくある質問はすべて Google で簡単に検索でき、StackOverflow にあります。