php mysqlクエリにjquery ajaxデータを正しく表示する方法

Question

私の記事の後にコメントシステムを追加したい場合は<form id="postform" class="postform">がMYSQL_QUERY結果サークルに書き込まれます。コメントを投稿した後、現在投稿されているコメントはすべて<div class="post_comment"></div>に表示され、現在投稿されているコメントのみが表示されるようにjquery ajaxの部分を変更する方法<div class="post_comment"></div>？ありがとう。オブジェクトの前に

jqueryのAJAX部

$(document).ready(function(){ 
$(".Submit").click(function(){ 
var title = $(this).closest('form').find("#title").val(); 
var content = $(this).closest('form').find("#content").val(); 
$.ajax({ 
type: "POST", 
url: "ajax_post.php", 
data: {title:title,content:content}, 
success: function(date_added){ 
if(date_added != 0) 
{ 
var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_content">'+content+'</div>';   
$(".post_comment").prepend(structure); 
} 
} 
}); 
}); 
}); 

PHP部

<?php 
... 
while($result = mysql_fetch_array($resultset)) 
{ 
$article_title = $result['article_title']; 
... 
?> 
<form id="postform" class="postform"> 
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" /> 
<input type="text" name="content" id="content" /> 
<input type="button" value="Submit" class="Submit" /> 
</form> 
<div class="post_comment"> 
<?php 
$resultSet = @mysql_query("select * from customcomment where article='".$article_title."' order by date_added desc"); 
while($resultRow = mysql_fetch_array($resultSet)) 
{ 
$date_added = $resultRow['date_added']; 
$comment = stripslashes($resultRow['content']); 
?> 
<div class="comment_date_added"><?=$date_added;?></div><div class="comment_content"><?=$comment;?></div> 
<?php 
} 
?> 
</div> 
... 
<?php 
} 
?> 

Answer 1

イージーな解決策は次のとおりです。

$(document).ready(function() { 
    $(".Submit").click(function() { 
     var title = $(this).closest('form').find("#title").val(); 
     var content = $(this).closest('form').find("#content").val(); 
     var this_form = $(this); 
     $.ajax({ 
      type: "POST", 
      url: "ajax_post.php", 
      data: { 
       title: title, 
       content: content 
      }, 
      success: function (date_added) { 
       if (date_added != 0) { 
        var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>'; 

        $(this_form).parent().next(".post_comment").prepend(structure); 
       } 
      } 
     }); 
    }); 
}); 

変更は

var this_form = $(this); 

追加

され、

$(this_form).parent().next(".post_comment").prepend(structure); 

その他のソリューション（エレガントなもの）に

$(".post_comment").prepend(structure); 

を変更：

この方法では、アーティクルに依存する固有の値が必要です。アーティクルのタイトルは大きすぎるため無効な文字列を持つ可能性があるため、十分ではありません。

最初の質問はその一意のキーを生成する方法です。

すでに自動インクリメントの主キーがある場合は、それを使用できます。しかし、それはお勧めしません。

第2に、アーティクルの作成時にunqiueキーを生成し、アーティクルテーブルにarticle_keyなどの名前で保存できます。 8〜12文字の英数字の数値は、良い一意のキーと考えることができます。

データベースを変更できない場合は、表示時にこの固有のキーを作成できます。

その後、XSSとしてだけでなく、あなたはそこにいくつかの恐ろしいSQLインジェクションの脆弱性を持っている

$(document).ready(function() { 
    $(".Submit").click(function() { 
     var title = $(this).closest('form').find("#title").val(); 
     var content = $(this).closest('form').find("#content").val(); 
     var article_key = $(this).closest('form').find("#article_key").val(); 
     $.ajax({ 
      type: "POST", 
      url: "ajax_post.php", 
      data: { 
       title: title, 
       content: content, 
       article_key: article_key 
      }, 
      success: function (date_added) { 
       if (date_added != 0) { 
        var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>'; 
        $(".post_comment #article_" + article_key).prepend(structure); 
       } 
      } 
     }); 
    }); 
}); 

Answer 2

var structure = '<div class="post_comment"><div class="comment_date_added">'+date_added+'</div> 
<div class="comment_content">'+content+'</div></div>'; 
$(".post_comment").before(structure); 

.before。
。オブジェクトの後ろに置く（望むなら）