jQueryでAjaxを使ってPost送信をする方法:$.post()

今回は、jQueryでAjaxを使ってPost送信をする方を説明します。

AjaxでPost送信をする$.post()

Ajaxを使ってPost送信するには、jQueryの「$.post」メソッドを使用します。

送信側(jQuery)

var postData = {"first_name":"一郎", "last_name":"鈴木"};
$.post("post.php", postData);
1行目: postDataに送信するデータを{名前:値}のセットで記述します。複数送信したい場合は「,」で区切ります。 2行目: AjaxでPost送信します。第一引数が、Post送信先URL、第二引数が、Post送信するデータです。

受け取り側(PHP)

Post送信されたデータは、「$_POST」のキーに名前を指定することで取得できます。
$firstName = $_POST['first_name'];// 一郎
$lastName = $_POST['last_name'];// 鈴木
ここでは、$_POST['first_name']とすることで送信されたファーストネーム(一郎)を取得しています。

Post送信した結果を受け取る

jQueryでPost送信して、受け取り側(PHP)が処理をし、その結果を受け取ることができます。

送信側(jQuery)

$.post()の第三引数として無名関数を指定しています。受け取り側PHPで処理された結果が、dataに入ります。
var postData = {"first_name":"一郎", "last_name":"鈴木"};
$.post(
     "post.php",
     postData,
     function(data){
         alert(data); //結果をアラートで表示
     }
);

受け取り側(PHP)

受け取ったデータを元に処理をします。「echo」することで、Ajax処理を行ったjQuery側に結果を渡すことができます。
$firstName = $_POST['first_name'];// 一郎
$lastName = $_POST['last_name'];// 鈴木 
$result = 'こんにちは、' . $lastName . $firstName . 'さん';
echo $result;

イベント