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

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

#デモ
http://www.i-yan.com/demo/ajax_comment/

#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化する際に必要な共通化を実施