Question

我写了一个非常简单的评论系统的开头。它使用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 INSERT（插入注释）：

<?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 SELECT（检索评论）：

<?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);
    }
    });
    }
  });
});

Answer 1

发送时你已经有了注释，所以当AJAX调用提交注释成功时，你只需附加注释而不实际从PHP / AJAX获取注释。

所以不要返回评论，这只是实际上不会被使用的数据。

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

如果成功则在PHP文件中返回200状态代码，如果失败则返回4xx状态代码。这种方式只有在返回200状态代码时，它才会进入succes:块

您也可以使用jQuery模板（http://api.jquery.com/template/）而不是附加上述评论。

按状态码过滤:(本页面上的文档）：http://api.jquery.com/jQuery.ajax/

捕获失败，如下例所示：

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    // add comment here, succes will go here if ajax returns a 200 statuscode
  }
  error: function(){
    // add failure here, error will go there if ajax returns a 4xx statuscode
  }
});

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

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

Answer 2

你可以像

这样的东西

$.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_comments设置为容器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>

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

Answer 3

@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);
}

希望你明白。

ajax评论显示提交没有页面刷新

3 个答案: