今回は、jQueryでAjaxを使ってPost送信をする方を説明します。
AjaxでPost送信をする$.post()
Ajaxを使ってPost送信するには、jQueryの「$.post」メソッドを使用します。
送信側(jQuery)
1 2 |
var postData = {"first_name":"一郎", "last_name":"鈴木"}; $.post("post.php", postData); |
1行目:
postDataに送信するデータを{名前:値}のセットで記述します。複数送信したい場合は「,」で区切ります。
2行目:
AjaxでPost送信します。第一引数が、Post送信先URL、第二引数が、Post送信するデータです。
受け取り側(PHP)
Post送信されたデータは、「$_POST」のキーに名前を指定することで取得できます。
1 2 |
$firstName = $_POST['first_name'];// 一郎 $lastName = $_POST['last_name'];// 鈴木 |
ここでは、$_POST['first_name']とすることで送信されたファーストネーム(一郎)を取得しています。
Post送信した結果を受け取る
jQueryでPost送信して、受け取り側(PHP)が処理をし、その結果を受け取ることができます。
送信側(jQuery)
$.post()の第三引数として無名関数を指定しています。受け取り側PHPで処理された結果が、dataに入ります。
1 2 3 4 5 6 7 8 |
var postData = {"first_name":"一郎", "last_name":"鈴木"}; $.post( "post.php", postData, function(data){ alert(data); //結果をアラートで表示 } ); |
受け取り側(PHP)
受け取ったデータを元に処理をします。「echo」することで、Ajax処理を行ったjQuery側に結果を渡すことができます。
1 2 3 4 |
$firstName = $_POST['first_name'];// 一郎 $lastName = $_POST['last_name'];// 鈴木 $result = 'こんにちは、' . $lastName . $firstName . 'さん'; echo $result; |