jQuery ajax - post()メソッド

jQuery Ajax 参考マニュアル

例

test.phpウェブページをリクエストし、応答値を無視します：

$.post("test.php");

TIY例

AJAX POSTリクエストを通じてdiv要素のテキストを変更します：

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

実際に試してみましょう

定義と使用法

post()メソッドはHTTP POSTリクエストを通じてサーバからデータをロードします。

文法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
パラメータ 説明
url 必須。リクエストを送信するURLを定義します。
data オプション。マッピングまたは文字列値。リクエストとともにサーバーに送信されるデータを定義します。
success(data, textStatus, jqXHR) オプション。リクエスト成功時に実行されるコールバック関数です。
dataType

オプション。予期されるサーバ応答データタイプを定義します。

デフォルトでインテリジェントな判定（xml、json、script、html）を実行します。

詳細説明

この関数は短縮されたAjax関数で、以下に等価です：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

異なるMIMEタイプの応答に応じて、successコールバック関数に渡されるデータも異なります。これらのデータはXMLの根要素、テキスト文字列、JavaScriptファイル、またはJSONオブジェクトで、また応答のテキスト状態もsuccessコールバック関数に渡すことができます。

jQuery 1.5では、successコールバック関数に jqXHR オブジェクト（jQuery 1.4ではXMLHttpRequestオブジェクトが渡されます）。

大部分実装はsuccess関数を定義します：

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

この例では、リクエストされた HTML フラグメントを読み込み、ページに挿入します。

POST メソッドで読み込まれたページはキャッシュされません、したがって jQuery.ajaxSetup() の cache と ifModified オプションはこれらのリクエストに影響を与えません。

コメント：ブラウザのセキュリティ制限により、多くの "Ajax" リクエストは同源ポリシーに従います；異なるドメイン、サブドメイン、またはプロトコルからのデータの取得は成功しません。

コメント：jQuery.post() で発行されたリクエストがエラーコードを返した場合、何も表示されません。ただし、スクリプトがグローバルの .ajaxError() メソッド。または jQuery 1.5 の jQuery.post() が返す jqXHR オブジェクトの .error() メソッドもエラーハンドリングに使用できます。

jqXHR オブジェクト

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR," 实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 为了方便使用和一致性考虑，它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

// 生成请求后立即分配处理程序，请记住该请求针对 jqxhr 对象
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    // ここで他のタスクを実行
    // 上記のリクエストに別の完了関数を設定
    jqxhr.complete(function(){ alert("second complete"); });

さらに多くの例

例 1

test.php ページにリクエストを送信し、追加のデータを一括で送信します（返される値を無視しています）：

$.post("test.php", { name: "Bill", time: "2pm" } );

例 2

データ配列をサーバーに送信します（返される値を無視しています）：

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

例 3

ajax リクエストを使用してフォームデータを送信します：

$.post("test.php", $("#testform").serialize());

例 4

test.php ページからの結果（返される内容に応じて HTML または XML）を出力します：

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

例 5

test.php ページにデータを送信し、結果（返される内容に応じて HTML または XML）を出力します：

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

例 6

test.php ページの内容を取得し、XMLHttpResponse オブジェクトとして保存し、process() という JavaScript 関数で処理します：

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

例 7

test.php ページから返される JSON フォーマットの内容を取得します：

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // Bill
     console.log(data.time); //  2pm
   }, "json");

jQuery Ajax 参考マニュアル