jQuery の ajax で POST を非同期で送る
web ページからサーバにリクエスト情報を送る際に HTTP GET / POSTメソッドを使う機会は非常に多いが、通常この処理を行うと、サーバサイドで情報を受け取ってレスポンスを返すためのページを読み込むことを余儀なくされる。
一方、ページのリロードを伴わずに非同期でリクエストだけ送りたい場面も生じるが、この場合は、JQuery の ajaxメソッドで を使用すれば割と容易に実装ができてしまう。というわけで、さっそく手順を備忘録として記したい。
1. jQuery を読み込む
まずは基本中の基本から・・・。実装したいページ内で、<script> タグを使いオプションの src 属性で読みこませる JQuery の URI を指定する。
URI は予め本家から入手して自サーバ内に設置しておいた場所を指定する方法や、google のCDN（content delivery network : 配信用に最適化されたネットワーク）など外部にホストされている JQuery のアドレスを指定する方法がある。
'保管した場所から読み込み <script src="/保管場所/jquery-ヴァージョン.min.js"></script> 'google の CDN から読み込み <script src="//ajax.googleapis.com/ajax/libs/jquery/ヴァージョン/jquery.min.js"></script>"
ヴァージョンは1.x系、2.x系、3.x系があり、それぞれサポートするブラウザの範囲が異なる。2.x系以降はIE9以降しかサポートしていないため、サービス対象にIE8以下が含まれている場合には、1.x系を選択する。
なお、CDN からの読み込みを選んだ場合、サービス障害等で読み込むことができない不足の事態に備え、代わりに自サーバに配置した jQuery を読み込むように以下のように記述しておくと良い。
<script src="//ajax.googleapis.com/ajax/libs/jquery/ヴァージョン/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/保管場所/jquery-ヴァージョン.min.js"><\/script>');</script>
また、読み込む場所は、ページの読み込みを優先したい場合は、冒頭の<head>~</head>タグ内ではなく、<body>〜</body>タグの最後に記述するのが今流だ。
2. POST フォーム の通常 submit を無効化
続いて form タグで普通にPOST のフォームを作り、その後通常の同期通信型 submit が行えないようにする。submit 無効化の方法については、javascript のsubmit イベントで、'return false'を使ったり、'preventDefault()'を使う方法があるが、当方環境では、これらの方法をとると、連続してsubmit した場合に2回目で無効化が解除されてしまっていて通常の submit による リロードが発生してしまう事態に何度か直面したため、別の方法をとることにしている。例えば、form タグの action属性 に 'javascript:void(0);' を指定して、戻り値をundefined(未定義)として submit を無効化する方法など。以下はその例。
<form action="javascript:void(0);">
・
・
・
</form>
あるいは submit ボタンの代わりに、aタグによる擬似ボタンを作るなど。但しこの場合も、'href' に 'javascript:void(0);' を指定してaタグ本来の動きを止める必要がある。
3. Jquery で onClick イベントを作成
通常の submit を無効化したら、いよいよ JQuery の ajaxメソッドで非同期通信の処理を onClick イベントで書いていく。テンプレート的な書き方は以下のとおり。
<form id="test" action="javascript:void(0);">
・
・
・
<input type="submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input#test').click(function () {
// 一括してフォームデータを取得
var formData = $('#test').serialize();
console.log(formData);
$.ajax({
url: "test.php", //POST送信を行うファイル名を指定
type: "POST",
data: formData //POST送信するデータを指定（{ 'hoge': 'hoge' }のように連想配列で直接書いてもOK）
});
});
});
</script>
これでページのリロードを挟まずにPOST送信が非同期で行える。
4. POST 成功した後に、POSTした内容でページの一部を更新
3. で使用したajaxに「done」メソッドを付けると、POST送信が成功した場合に新たな処理を実行できる。また、「done」メソッドには、指定した引数にPOSTから渡されたデータを格納できる。
この「success」オプション内で、 '$(object).text()' や '$(object).text()', '$(object).load()' などの非同期型の JQueryメソッドを記述することで、POST した内容に応じながら一部ページの更新をリロードなしに実行できる。
以下は、$(object).text() を使用した例。
<form id="test" action="javascript:void(0);"> ・ ・ ・ <input id="dummy" type="text" name="dummy" /> <input id="test" type="submit" /> </form> <div id="sample">何か記入してください</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('input#test').click(function () { // 一括してフォームデータを取得 var formData = $('#test').serialize(); console.log(formData); $.ajax({ url: "test.php", //POST送信を行うファイル名を指定 type: "POST", data: formData //POST送信するデータを指定（{ 'hoge': 'hoge' }のように連想配列で直接書いてもOK） }).done(function(data) { $('div#sample').text(data2); }); }); }); </script>
蛇足ながら、実際に動かしてみる場合の参考に 'test.php' の例も。
<?php
$dummy = $_POST['dummy'];
if (is_null($dummy)){
echo "何か記入してください";
}elseif (trim($dummy)==""){
echo "空白です";
}else {
echo "あなたは、\"" . $dummy . "\"と書きました";
}
?>
