[Ajax] jQueryとPHPでWebページの一部分を更新する方法

Webページ全体の更新をしないで、一部分だけ更新する技術をAjaxといいます。

jQueryのバージョンによってAjaxの書き方が変わっているので、jQueryのバージョンに合わせた書き方をしなければなりません。

jQuery 1.8以降での書き方を紹介します。

Contents

1 Ajaxの基本的なテンプレート
2 Ajaxの利用例

Ajaxの基本的なテンプレート

<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>

$(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を含めて処理が完了した場合

// HTMLでの送信をキャンセル
event.preventDefault();

1 2	// HTMLでの送信をキャンセル event.preventDefault();

Ajaxを行うとき、a要素をクリックしたときにリンク先に飛んでしまうのをキャンセルする処理です。

Ajaxの利用例

Ajaxでtext.phpのファイルの内容を表示させてみます。

<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>