ajaxで画面遷移無しでコメント書き込み反映

Ajax使いの方にとって特に目新しいことはしていません。

デモ

DB (MySQL)

コメントテーブルはこんな感じ。

tbl_comment

CREATE  TABLE IF NOT EXISTS `dbname`.`tbl_comment` (
  `comment_id` BIGINT NOT NULL AUTO_INCREMENT ,
  `name` VARCHAR(20) NULL ,
  `comment` VARCHAR(255) NULL ,
  `register_date` DATETIME NULL ,
  `updated_date` DATETIME NULL ,
  `invalid` TINYINT NOT NULL DEFAULT 0 ,
  `ip_address` VARCHAR(16) NULL ,
  PRIMARY KEY (`comment_id`) ,
  INDEX `sel` (`comment_id` DESC, `invalid` ASC)
)
ENGINE = InnoDB;

ServerSide API (PHP)

• comment_get.php …コメントテーブルから10件選択してJSON形式で返す
• comment_send.php …送られたパラメータをコメントテーブルにINSERTする

JavaScript + HTML

HTMLは "#input-names", "#input-thanks", ".comment-list-set" の3つから成る。

<div>
    <div id="input-names">
        お名前<input type="text" name="name" value="" placeholder="入力必須"><br />
        コメント<input type="textarea" name="comment" value="" placeholder="入力必須"><br />
        <input type="button" id="send-comment" value="送信">&nbsp;<span style="color: red;" id="send-comment-error"></span>
    </div>
    <div id="input-thanks" style="display: none;">
        ありがとうございました。
    </div>
    <hr class="comment-list-set" style="display: none;">
    <h3 class="comment-list-set" style="display: none;">皆様のコメント</h3>
    <div class="comment-list-set" style="display: none;" id="comment-list">
        <!--{* コメントがある場合はここにセットされる *}-->
    </div>
    <hr>
</div>

JavaScriptのfunctionは２つ

• getComment() …comment_get.phpに通信を行ないコメント一覧を読み込んで表示する
• sendComment() …comment_send.phpに通信を行う

// ドキュメントが読み込まれた際
$(document).ready(function(){
    // 送信ボタンを押したら sendComment() を実行
    $('input#send-comment').click(function(){
        sendComment();
    });
    // 既存のコメントを読み込んで表示
    getComment();
});
// コメント送信（書き込み）
function sendComment() {
    // 未入力チェック
    if (!$('input[name=name]').val()) {
        $('#send-comment-error').text('名前を入力して下さい。');
        return false;
    }
    if (!$('input[name=comment]').val()) {
        $('#send-comment-error').text('コメントを入力して下さい。');
        return false;
    }

    $.post(
        'comment_send.php',
        {
            'name': $('input[name=name]').val(),
            'comment': $('input[name=comment]').val()
        },
        function(data){
            // 書き込みが完了したら再度コメント一覧を読み込む
            getComment();
            $('#input-names').hide('slow');
            $('#input-thanks').show('slow');
        }
    );
}
// コメント一覧受信・表示
function getComment() {
    $.get(
        'comment_get.php',
        null,
        function(data){
            // コメントリスト
            $('#comment-list').html('');
            var json = JSON.parse(data);
            if (json.length >= 1) {
                var str;
                for (var i = 0, len = json.length; i < len; i++) {
                    str = json[i]['name'] + 'さん　' + json[i]['comment'];
                    $('#comment-list').append($('<p/>').text(str));
                }
                $('.comment-list-set').show();
            }
        }
    );
}

今後

• jQueryの通信を $.post() で行なっているためサーバエラーを拾えません。$.ajax() に書き直してエラー制御を確立
• 表示ブロック単位でウェブページ中のあらゆる要素をAjax化する際に必要な共通化を実施