Php 提交时显示ajax注释，同时刷新页面

我写了一个非常简单的评论系统的开始。它使用jQuery/AJAX/PHP-MySQL。到目前为止，它运行良好。但是，提交评论后，您必须刷新页面以显示评论。如何在提交时显示

我希望这里的代码不要太多，但这里有三个部分。jQuery/php插入注释查询/php选择注释查询

jQuery/AJAX：

$(document).ready(function() {
  $('#button').click(function() {
    var name = $('#name').val();
    var comment = $('#comment').val();

    if(name == '' || comment == '') {
        $('#comment_messages').html('Please enter both fields');
    } else if(name !== '' || comment !== '') {
        $('#comment_messages').html('');

    $.ajax({
    type: 'POST',
    url: 'comments.php',
    data: 'name='+name+'&comment='+comment,
    success: function(data) {
    $('#comments_area').append(data);
    }
    });
    }
  });
});

PHP插入以插入注释：

<?php

include('init.inc.php');

if(isset($_POST['name'], $_POST['comment'])) {
  $name = $_POST['name'];
  $comment = $_POST['comment'];
  if(!empty($name) && !empty($comment)) {
    $query = mysql_query("INSERT INTO comments VALUES(NULL, '$name', '$comment', CURRENT_TIMESTAMP)");
    if($query === true) {

      // right here is what is being returned to success: function(data) in the ajax script.  What's the best way to return the comment here? 

    } else {
      echo 'Hmmm... that\'s odd........';
    }
  } else {
    echo 'Please enter both fields';
  }
}

?>

<?php

$query = mysql_query("SELECT * FROM comments ORDER BY time DESC LIMIT 10");

  $num = mysql_num_rows($query);
  if($num >= 1) {
    while($fetch = mysql_fetch_assoc($query)) {
      $name = $fetch['name'];
      $comment = $fetch['comment'];
      $time = $fetch['time'];

      ?>

        <div id="user_comments">

          <?php echo $name; ?> said at: <span id="time_stamp"><?php echo $time; ?></span><p>- <?php echo $comment; ?>

        </div>

      <?php

    }
}

?>

PHP选择以检索注释：

<?php

include('init.inc.php');

if(isset($_POST['name'], $_POST['comment'])) {
  $name = $_POST['name'];
  $comment = $_POST['comment'];
  if(!empty($name) && !empty($comment)) {
    $query = mysql_query("INSERT INTO comments VALUES(NULL, '$name', '$comment', CURRENT_TIMESTAMP)");
    if($query === true) {

      // right here is what is being returned to success: function(data) in the ajax script.  What's the best way to return the comment here? 

    } else {
      echo 'Hmmm... that\'s odd........';
    }
  } else {
    echo 'Please enter both fields';
  }
}

?>

<?php

$query = mysql_query("SELECT * FROM comments ORDER BY time DESC LIMIT 10");

  $num = mysql_num_rows($query);
  if($num >= 1) {
    while($fetch = mysql_fetch_assoc($query)) {
      $name = $fetch['name'];
      $comment = $fetch['comment'];
      $time = $fetch['time'];

      ?>

        <div id="user_comments">

          <?php echo $name; ?> said at: <span id="time_stamp"><?php echo $time; ?></span><p>- <?php echo $comment; ?>

        </div>

      <?php

    }
}

?>

更新：

在底部添加了两行：

$(document).ready(function() {
  $('#button').click(function() {
    var name = $('#name').val();
    var comment = $('#comment').val();

    if(name == '' || comment == '') {
        $('#comment_messages').html('Please enter both fields');
    } else if(name !== '' || comment !== '') {
        $('#comment_messages').html('');

    $.ajax({
    type: 'POST',
    url: 'comments.php',
    data: 'name='+name+'&comment='+comment,
    success: function(data) {
    $('#comments_area').append('<b>'+name+'</b><p>- '+comment);
    $('#comment_messages').html(data);
    }
    });
    }
  });
});

---

在发送注释时，您已经有了注释，因此，当提交注释的AJAX调用返回成功的注释时，您可以直接追加注释，而不需要实际从PHP/AJAX获取注释

所以不要返回注释，这只是数据，实际上不会被使用

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
$('#comments_area').append('<b>'+name+'</b>: '+comment);
}
});
}
});

如果要使用状态代码，请查看以下示例：

$.ajax({
  statusCode: {
    200: function() {
        //succes
    },
    400: function(){
        // bad request
    }
  }
});

---

在发送注释时，您已经有了注释，因此，当提交注释的AJAX调用返回成功的注释时，您可以直接追加注释，而不需要实际从PHP/AJAX获取注释

所以不要返回注释，这只是数据，实际上不会被使用

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
$('#comments_area').append('<b>'+name+'</b>: '+comment);
}
});
}
});

如果要使用状态代码，请查看以下示例：

$.ajax({
  statusCode: {
    200: function() {
        //succes
    },
    400: function(){
        // bad request
    }
  }
});

---

你可以这么说

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
    $('#comments_area').append(data);
    $('user_comments').load('selectcomments.php #user_comments')
}

然后它将保存条目，并重新加载注释部分

但您应该将user_注释设置为容器ID，并且永远不要将ID用于重复元素

所以我会这么做

<div id="user_comments">
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
</div>

---

然后在你的评论中插入关于成功的内容，我会为用户制作一个成功消息。

你可以这样做

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
    $('#comments_area').append(data);
    $('user_comments').load('selectcomments.php #user_comments')
}

然后它将保存条目，并重新加载注释部分

但您应该将user_注释设置为容器ID，并且永远不要将ID用于重复元素

所以我会这么做

<div id="user_comments">
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
</div>

---

然后在你的成功评论中插入我会为用户做一个成功消息。

@Graham，正如Topener所说，你可以做的，或者另外，你可以做的是，当ajax响应发送一个数字代码时

if(//name and comment empty){
  echo "0";
} else if (// name and comment not inserted to db table){
  echo "1";
} else if (//successful){
  echo "2";
}

现在，基于这个ajax响应，您可以编写java脚本，即

if(response == '0'){
  $('#comment_messages').html('Please enter both fields');
} elseif (response == '1'){
  $('#comment_messages').html('Hmmm... that\'s odd........');
} elseif (response == '2'){
  $('#comments_area').append('<b>'+name+'</b>: '+comment);
}

---

希望您能理解。

@Graham，正如Topener所说，您可以做的，或者另外，您可以做的是，当ajax响应发送一个数字代码时

if(//name and comment empty){
  echo "0";
} else if (// name and comment not inserted to db table){
  echo "1";
} else if (//successful){
  echo "2";
}

现在，基于这个ajax响应，您可以编写java脚本，即

if(response == '0'){
  $('#comment_messages').html('Please enter both fields');
} elseif (response == '1'){
  $('#comment_messages').html('Hmmm... that\'s odd........');
} elseif (response == '2'){
  $('#comments_area').append('<b>'+name+'</b>: '+comment);
}

---

希望您能收到。

好主意。但是你应该创建一个成功/失败的结构，对吗？原因：即使无法将注释插入数据库，它也会成功加载页面吗您应该返回PHP头，如果成功则返回200，如果失败则返回4xx。这样它就不会以成功告终。我喜欢这种方法。我还将成功/失败添加到您建议在更新中看到的代码行下面。这种做法是否可扩展/安全/通用？看起来它会在append标签中变得非常混乱。它看起来有点凌乱。你也可以使用jQueryAjax状态码的组合在这里查找它，然后使用模板：好主意。但是你应该创建一个成功/失败的结构，对吗？原因：即使无法将注释插入数据库，它也会成功加载页面吗您应该返回PHP头，如果成功则返回200，如果失败则返回4xx。这样它就不会以成功告终。我喜欢这种方法。我还将成功/失败添加到您建议在更新中看到的代码行下面。这种做法是否可扩展/安全/通用？看起来它会在append标签中变得非常混乱。这看起来有点混乱。你也可以使用jQuery ajax状态码的组合在这里查找和模板：使用状态码会更好，所以你不需要自己做逻辑检查input@Topener你能给我举一个使用状态码的例子吗？只使用状态码会更好，所以你不需要自己做逻辑检查input@Topener你能给我举一个关于状态码的例子吗？