jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル
jQueryのajaxメソッドを使ってPHPとAjaxで非同期通信するサンプルを作成してみました。
HTTP通信をPOSTメソッドで行い、通信に成功した場合PHPから返された文字列を表示するっていうだけの単純なものです。
ちなみに$.ajaxのdataにはObject形式で渡すと良いみたいです。
jQuery で Ajax でデータを POST 送信する際にオブジェクトで値を渡すと自動的にエンコードしてくれる – WEBLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQuery & Ajax & PHP Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/** 送信ボタンクリック */
$('#send').click(function() {
//POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
var data = {request : $('#request').val()};
/**
* Ajax通信メソッド
* @param type : HTTP通信の種類
* @param url : リクエスト送信先のURL
* @param data : サーバに送信する値
*/
$.ajax({
type: "POST",
url: "send.php",
data: data,
success: function(data, dataType) { /** Ajax通信が成功した場合に呼び出される */
//返ってきたデータの表示（当サンプルだと「OK」か「The parameter of "request" is not found.」）
alert(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) { /** Ajax通信が失敗した場合に呼び出される */
// 通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、
// 単純に通信に失敗した際の処理を記述します。
this; // thisは他のコールバック関数同様にAJAX通信時のオプションを示します。
alert('Error : ' + errorThrown);
}
});
});
/** サブミット後、ページをリロードしないようにする */
$('form').submit(function() {
return false;
});
});
</script>
</head>
<body>
<h1>jQuery & Ajax & PHP Example</h1>
<form method="post">
<p><textarea id="request" cols="20" rows="4"></textarea></p>
<p><input id="send" value="送信" type="submit" /></p>
</form>
</body>
</html>
<?php
header("Content-type: text/plain; charset=UTF-8");
if(isset($_POST['request'])) {
//ここに何かしらの処理を書く（DB登録やファイルへの書き込みなど）
echo "OK";
}else {
echo 'The parameter of "request" is not found.';
}
?>