ajax&php post 一部更新

質問

http://okwave.jp/qa/q7574571.html
でもご質問させていただきましたが、ajaxを使用してphpファイルに記述のあるmysql insert文でデータベースの登録はできました。

bbs.php
<table class="commentlist">
<!-- bbs.inc.phpファイルという別ファイルでfor文で一覧を出している。 -->
</table>

<!-- ここからがコメントの入力 -->
<form method="post">
<input type="text" name="comment" id="comment" value="" />
<input type="button" name="save" id="save" value="投稿" />
</form>

$("#save").click(function(){
var p = $("#comment").val();
$("#comment").val("");
$.post( "bbs.php", { request:p, success: (ここがわからない。)});
});

としたときにフォームでpostしたときにページ全体にリロードではなくclass="commentlist"の一覧のみリロードしたいのですが、どうもできません。
どなたかご教示お願いします。
(bbs.inc.phpはソース内には残したくないです。)

回答No.2

consoleLog

まずはphp側で一覧を取得してresultに値が入るかを目指しましょう。

補足

phpで一覧の取得をしております。

bbs.inc.php
-- LEFT JOINを使用してのmysql接続 --
//$row['name']はjoinで別テーブルからの呼び出し
while ($row = mysql_fetch_assoc($commentres)) {
$commentlist .= '<p>' .$row['name']. '：' .$row['comment'].$row{'date']. '</p>'."\n";
}

bbs.php
<div id="commentlist">
<?php echo $commentlist; ?>
</div>

<form method="post">
<input type="hidden" name="bbs_id" id="bbs_id" value="<?php echo $bbs_id; ?>" />
<input type="hidden" name="name_id" id="name_id" value="<?php echo $name_id; ?>" />
<input type="text" name="comment" id="comment" value="" />
<input type="button" name="save" id="save" value="投稿" />
</form>

$(function(){
$("#save").click(function(){
var a = $("#bbs_id").val();
var b = $("#name_id").val();
var p = $("#comment").val();

$.ajax({
type: "POST",
scriptCharset: 'utf-8',
dataType:'json',
url: "bbs.php",
data: { bbs_id:a, name_id:b, comment:p },
success: function(result){
alert('通る');
},
error:function(){
alert('通らない');
}
});
});
});
といたしております。
必ずerrorを通ってしまいます。

どうかご教示お願いします。

回答No.1

consoleLog

Ajaxの処理の流れは以下のようになります。

1) 登録
2) 一覧取得
3) htmlに書き出し

bbs.php内でデータ登録、一覧取得してsuccess部分で表示させます。

success: function(rerult){

}

※rerultはbbs.php内でprint_rした配列

success: function(rerult){
// この中にhtmlに書き出す処理をすればOKです。
}

success: function(rerult){
var html = '';
for (var i = 0; i < rerult.length; i++) {
// 配列を回してテーブルの中を作る
html = html + '<tr><td>rerult.val</td></tr>';
}
　　$(".commentlist").val(html);
}

お礼

お忙しい中有難う御座います。
上記の内容を少々カスタマイズして、
こちらの環境用にしたのですが、リロードがされませんでした。

結果はsuccessがundefind(fire bugで確認)になってしまいます。
変更したところはi<result.length;をi<30にして
html = html + '<tr><td>rerult.val</td></tr>';
を
html = html + '<tr><td><?php echo $name; ?></td><td><?php echo $comment; ></td></tr>';
としています。