ライブラリ:jQuery
jQueryを使うと、submitしなくてもサーバとやりとりができます。
クライアント側でJavaScript+jQuery、サーバ側でPHPを使用してPOSTしてみました。
1. jQuery.post(url, data, callback, type)でPOSTリクエスト送信
jQueryのpostというメソッドを使うとサーバにPOSTリクエストを送信することができます。
2. postメソッドの引数
url
リクエスト送信先のURL。
data
送信するデータ。連想配列で指定。
callback
通信成功時に実行する関数(コールバック関数)。
type
送信データの形式(未指定でもOKみたい)。
また、戻り値はXMLHttpRequestオブジェクトです。
3. 使用例
「POSTする」ボタンを押すと、HTTP通信して得た文字列(Hello world!!)をページに表示するコードです。
クライアント側のコードは以下のようになります。
<html>
<head>
<title>jQuery+PHPでPOST</title>
<script type="text/javascript" src="/src/common/js/jquery.js"></script>
<script type="text/javascript">
<!--
function clickButton() {
$.post("./post.php", {}, function(data) {
$("#ret").html(data);
});
}
-->
</script>
</head>
<body>
<button onclick="clickButton()">POSTする</button>
<div id="ret"></div>
</body>
</html>
<head>
<title>jQuery+PHPでPOST</title>
<script type="text/javascript" src="/src/common/js/jquery.js"></script>
<script type="text/javascript">
<!--
function clickButton() {
$.post("./post.php", {}, function(data) {
$("#ret").html(data);
});
}
-->
</script>
</head>
<body>
<button onclick="clickButton()">POSTする</button>
<div id="ret"></div>
</body>
</html>
サーバ側のPHPスクリプト(post.php)は以下のようになります。
<?php
echo('Hello world!!');
?>
echo('Hello world!!');
?>
echoで出力した文字列がレスポンスされます。
$.postの他にも、GETで通信する$.getというメソッドもあります。また、失敗時の処理を指定したり、パラメータを細かく指定したい場合は、$.ajaxを使います。これらのメソッドはまた別の記事で書きたいと思います。
