使用Ajax发布对PHP的评论

Question

I'm having this comment form. this comment form works but not correctly whenever I post comment it works on 1 post and on another it refreshes the page and data is also not inserted all the post are fetch by while loop

JS:

< script type = "text/javascript" >

$(function() {
    $("#submit").click(function() {
        var mcomment = $("input#mcomment").val(); // define the name variable
        var mesgid = $("input#mesgid").val();
        if (mcomment == '') // if name field is empty
        {
            alert("Write Comment Please."); // alert an error mesaage
        } else {
            $.ajax({ // JQuery ajax function
                type: "POST", // ajax submit method
                url: "status/savecomment.php",
                data: 'mcomment=' + mcomment + '&mesgid=' + mesgid, // data sent to php file
                cache: false,
                success: function(html) { // if the result returns success
                    $("#comment_display").after(html);

                }
            });
        }
        return false;
    });
}); 
< /script>

HTML:

<form method="POST" id="commentform">
<div class="panel-footer p15">
    <div class="admin-form">
        <img src="image.png">
        <label for="reply1" >
        <input name="mesgid" id="mesgid" type="hidden" value="
            <?php echo $id ?>">
            <input name="mcomment" id="mcomment" placeholder="Respond with a 
                comment." type="text"  style="width:130%;">
            </label>
            <button type="submit" id="submit" class="button 
                btn-primary submit-btn" name="" style="width:90px; margin-
                left:50px;">Comment</button>
    </div>
</div>
</form>

here is all new edited code

<?php

$msql=mysql_query("SELECT * from `messages` ORDER BY `msg_id` DESC LIMIT 
$post_limit");



while($messagecount=mysql_fetch_array($msql))
{ 
$id=$messagecount['msg_id'];
$msgcontent=$messagecount['message'];
$usermsg=$messagecount['username'];
$userimg=$messagecount['image'];
$userimg1=$messagecount['user_img'];
$usertime=$messagecount['time'];

?>
<i class="pointer" id="pagination-<?php echo $id;?>"></i>
<div style="display: block;" class="timeline-item" id="clone-3">

      <div class="panel">
        <div class="panel-heading">

          <span class="panel-title" style="color:#000;"><?php echo 
ucfirst($usermsg); ?> Updated a </span><a href="post.php?id=<?php echo 
$id;?>">Post</a>
          <span class="panel-date pull-right mr10 text-muted fs12"> 
<?php echo timeAgo($messagecount['time']);?> via Web</span>
        </div>
        <div class="panel-body">
          <p><img src="image.php/<?php echo $userimg1;?>?width=60&
height=70&nocache&quality=100&image=http://localhost/niftians/profile
/upload/<?php echo $userimg1;?>" />&nbsp; &nbsp; <?php echo 
parse_smileys(make_clickable(nl2br(stripslashes($msgcontent))), 
$smiley_folder); ?><br><br><?php if(!empty($messagecount['image'])) { ?>

      <img src="status/image.php/<?php echo 
$messagecount['image'];?>?width=350&nocache&quality=100&
image=http://localhost/niftians/profile/upload/<?php echo
$messagecount['image'];?>" style="margin-left:10%;">
      <?php } ?></p>

        </div>

      </div>
    </div>

<?php 

$sql=mysql_query("select * from comments where msg_id_fk='$id' order by 
com_id");
$comment_count=mysql_num_rows($sql);

if($comment_count>2)
{
$second_count=$comment_count-2;
?><div class="comment_ui" id="view<?php echo $id; ?>">
<div>
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php 
echo $comment_count; ?> comments</a>
</div>
</div>
<?php 
} 
else 
 {
$second_count=0;
}
?>

<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">

<?php
$listsql=mysql_query("select * from comments where msg_id_fk='$id' order 
by com_id limit $second_count,2 ");


while($rowsmall=mysql_fetch_array($listsql))
{ 
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comments'];
$userid3=$rowsmall['username'];
$userimg5=$rowsmall['user_img'];
$usercom=$rowsmall['time'];

?>  <div id="comment_display"></div>

          <div class="media mt15" id="aniket">
                  <a class="pull-left" href="#"> <img class="media-
object thumbnail thumbnail-sm rounded mw40" src="image.php/<?php echo 
$userimg5;?>?width=60&height=60&nocache&quality=100&
image=http://localhost
/niftians/profile/upload/<?php echo $userimg5;?>" alt="..."> </a>
                  <div class="media-body mb5">
                    <h5 class="media-heading mbn"><a href="<?php echo 
$userid3; ?>"><?php echo ucfirst($userid3); ?></a>
                      <small> -<?php echo timeAgo($rowsmall['time']);?>
</small>
                    </h5>
                    <p><?php echo 
parse_smileys(make_clickable(nl2br(stripslashes($comment))), 
$smiley_folder); ?></p>
                  </div>
                </div>
              <?php } ?>
              </div>

              <form method="POST" id="commentform">
              <div class="panel-footer p15">
                <div class="admin-form">

<img src="image.php/<?php echo $info->img;?>?width=45&nocache&
quality=100&image=http://localhost/niftians/profile/upload/<?php echo
$info->img;?>">
<label for="reply1" >

<input name="mesgid" id="mesgid" type="hidden" value="<?php echo $id ?>">

<input name="mcomment" id="mcomment" placeholder="Respond with a 
comment." type="text"  style="width:130%;"> 

                  </label>
                 <button type="submit" id="submit" class="button 
btn-primary submit-btn" name="" style="width:90px; margin-
left:50px;">Comment</button>
                </div>
              </div>
              </form>
              <br>
<?php
}
?>

Answer 1

What you need to do is

• Remove Submit Button and add <input type="button">
• 2nd create a div in your page named as <div id="comment_display"></div>
• And if this does not solve problem, post your While loop.

Replace this line

 $("#submit").click(function() {

with

 $("#submit").on('.submit','click',function(e) { 
 e.preventDefault();

Note: Your submit can work too, but you would have to stop its default behavior using jquery