Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

【Javascript】【PHP】jQueryでajax的なコメント書き込み処理

JavaScript PHP

こんばんは。

今回はjQueryを使って画面遷移なしでajax的にコメントの投稿と表示をしてみたいと思います。

こちらのサイトがとても詳しく書いてあり、非常に参考になりました。

基本的には前のエントリで書いた$.postを用いて実装しています。


DBのテーブルを用意

まずはコメントを格納するテーブルを用意します。
今回は投稿者名（ユーザ名）とコメント内容、投稿日のカラムを用意します。

PHP処理

次にPHP側です。
PHP側ではcomment_send.phpとcomment_list.phpを作りました。

comment_send.phpでは、POSTで与えられた内容をテーブルに格納し、成功したら"OK"、失敗したら"NG"を返す処理にしています。

comment_list.phpでは、コメントの読み込みをしています。読み込みに成功したらコメントリストを表示するHTMLを返し、コメントがない場合は"No Comment"、エラーの場合は"NG"を返すようにしています。

HTML

次にHTML側です。

<div id="comment-list"></div>
<div id="comment-input">
	<div id="input-names">
		<form>
			<label>ユーザ名<br /><input type="text" name="user_name" placeholder="ユーザ名" /></label><br /><br />
			<label>内容<br /><textarea name="message" rows = "7" cols = "35"></textarea></label>
			<input type="button" id="send-comment" value="投稿" />
			<span id="send-comment-error"></span>
		</form>
	</div>
	<div id="input-thanks">コメントが投稿されました。</div>
</div>


各div(span)タグの役割は以下の通りです。

  • comment-list
    • コメントリストが表示される領域です。
  • input-names
    • フォーム領域です。
  • send-comment-error
    • エラーを表示する領域です。
  • input-thanks
    • 投稿が成功したときに表示する領域です（デフォルトではCSSで display:none として非表示にしています）

JavaScript

次にjQueryのほうです。

// コメント投稿ボタンを押したらsendComment()を実行
$("#send-comment").click(function(){
	if (confirm("投稿しますか？")) // OKボタンが押されたとき
		sendComment();
});

// 既存コメント読み込んで表示
getComment();

// コメント送信
function sendComment(){
	$("#send-comment-error").text("");
	if (!$("textarea[name=message]").val()){
		$("#send-comment-error").text("コメントを入力してください。");
		return false;
	}
	var user_name; // ユーザ名格納変数
	if (!$("input[name=user_name]").val())
		user_name = "名無し";
	else
		user_name = $("input[name=user_name]").val();
	
	$.post("comment_send.php", {"user_name":user_name, "message": $("textarea[name=message]").val()}, function(data){
		// 書き込み完了したらMessageを出力しコメント一覧を読み込む
		if (data === "NG"){ // コメントの投稿に失敗した場合
			$("#send-comment-error").text("コメントの投稿に失敗しました。もう一度やってみてください。");
			return false;
		}else{ // コメント投稿に成功した場合
			getComment();
			$("#input-thanks").show("slow");
		}
	});
}

// コメント一覧表示
function getComment(){
	$.post("comment_list.php", null, function(data){
		if (data === "NG"){
			$("#send-comment-error").text("コメントの読み込みに失敗しました。リロードしてみて下さい。");
			return false;
		}else if (data === "No Comment")
			$("#comment-list").text("コメントがありません。");
		else{
			$("#comment-list").html(data);
		}
	});
}


最初にconfirmで確認ダイアログを出しています。
また、ユーザ名が入力されていない場合は「名無し」としてDBに格納します。
getComment()では、コメントリストのHTMLが帰ってくるので、jQuery.htmlを使って直接HTMLソースを追記しています。


以上です。
やはりコメント投稿はajaxだと嬉しいですよね。


それでは。


参考にさせていただいたサイト

PHP - ajaxで画面遷移無しでコメント書き込み反映 - Qiita [キータ]