自分自身を送り先にして1ファイルだけで完結するAjaxのサンプル(PHP)

この方法だと1ファイルだけでAjax(非同期通信)を完結させることができます。

できるだけ不要ファイルを作りたくない神経質な方は参考にしてみてください。

<?php
if( $_SERVER&#91;'REQUEST_METHOD'&#93; == 'POST' ){
    echo $_POST&#91;'test'&#93;;
    exit ;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己完結型Ajaxのテスト</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
    $('#btn').click(function(){
        $.ajax({
            url: '送り先のアドレスを入れてください',
            type: 'POST',
            data: { test: 'TEST' },
            dataType: 'html',
            success: function( data ){
                $('#test').html(data);
            },
            //error: function( data ){},
            //complete: function( data ) {}
        });
    });
});
</script>
</head>
<body>
<div id="test"></div>
<span id="btn">ボタン</span>
</body>
</html>

ポイントとしてはPHP部分でPOSTリクエストがきた場合にexitで終了させてしまうところです。
これが無いとhtml部分まで読み込んでしまいます。

これで1ファイルだけですべて完結させられるので、コード管理がしやすくなるのではないでしょうか。

ページの先頭へ