Webページ全体の更新をしないで、一部分だけ更新する技術をAjaxといいます。
jQueryのバージョンによってAjaxの書き方が変わっているので、jQueryのバージョンに合わせた書き方をしなければなりません。
jQuery 1.8以降での書き方を紹介します。
Ajaxの基本的なテンプレート
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> $(function () { $('a').click(function (event) { event.preventDefault(); }), $.ajax({ url: "test.php" type: 'POST', data: {val:"test"}, timeout: 10000, dataType: 'text' }).done(function (data) { //Ajax通信に成功したときの処理 alert('success'); }).fail(function (data) { //Ajax通信に失敗したときの処理 alert('error'); }).always(function (data) { //処理が完了した場合の処理 alert('always'); }); }); </script> |
.doneは通信に成功した場合
.failは通信が失敗した場合
.alwaysはdoneかfailを含めて処理が完了した場合
|
0 1 2 3 |
// HTMLでの送信をキャンセル event.preventDefault(); |
Ajaxを行うとき、a要素をクリックしたときにリンク先に飛んでしまうのをキャンセルする処理です。
Ajaxの利用例
Ajaxでtext.phpのファイルの内容を表示させてみます。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> $(function () { $('a').click(function (event) { event.preventDefault(); }), $.ajax({ url: "test.php" type: 'POST', data: {val:"test"}, timeout: 10000, dataType: 'text' }).done(function (data) { //Ajax通信に成功したときの処理 $("#ajax").html(data); }).fail(function (data) { //Ajax通信に失敗したときの処理 }).always(function (data) { //処理が完了した場合の処理 }); }); </script> //HTML <div id="ajax">TEST</div> |
divのTESTと表示されている部分に、test.phpで返されたデータが表示されるようになります。
$(“#ajax”).html(data)でidがajaxのクラスの中身を書き換えます。
