firefox - ajax 需要两次请求相同的数据才能处理

Question

我有一个简单的页面（索引），其中有一个充满 cmets 的 div。它下面还有一个表单，用户可以在其中输入他们的姓名和消息，然后单击提交以发表评论。我有一个 php 页面来处理进入 MySQL 的过程，并在索引页面上使用 AJAX 来更新 cmets 而无需刷新。我的代码在 Chrome 上运行，但在 Firefox 上运行不同。

在 Firefox 上，我需要输入两次完全相同的数据才能将其加载到数据库中一次。第一次它什么也不做，如果我输入不同的数据它仍然什么都不做（因为那将是该数据的第一次），但如果我输入相同的数据两次，那么它会正确插入mysql，ajax会正确更新评论 div。

这是 index 上的脚本和 html：

<div id="comments">
    <ul>    
        <?php while($row = mysqli_fetch_assoc($results)) : ?>
        <li id='comment'><span>
            <?php echo $row['time']; ?> - </span><strong>
            <?php echo $row['user'];?>: </strong>
            <?php echo $row['msg']; ?>
        </li>
        <?php endwhile; ?>
    </ul>
</div>
<script>        
$(document).ready(function() {
    $(".comment-btn").click(function() {    
        var user = $("#user").val();
        var msg = $("#msg").val();      

        $.post("process.php",{user:user,msg:msg},function(data){
            $("#comments").html(data);
        });
    });         
});     
</script>
<div class="input">
    <?php if(isset($_POST['error'])) : ?>
    <div class="comment-error"><?php echo $_POST['error']; ?></div>
    <?php endif; ?>
    <form id="myForm">
        <input id="user" type="text" name="user" placeholder="Enter Your Name" />
        <input id="msg" style="float: right;" type="text" name="msg" placeholder="Enter Your Message" /><br>
        <input class="comment-btn" type="submit" name="submit" value="Post Comment" />
    </form>
</div>

这里是process.php：

<?php
include 'comments.php'; // just contains the connection
?>

<?php
$user = mysqli_real_escape_string($con, $_POST['user']);
$msg = mysqli_real_escape_string($con, $_POST['msg']);

// set timezone
date_default_timezone_set('America/Los_Angeles');
$time = date('h:i:s a',time());

if(!isset($user) || $user == '' || !isset($msg) || $msg == '') {
    echo "Please fill in your name and a comment";
    exit();
} else {
    $query = "INSERT INTO comment (user, msg, time)
              VALUES ('$user', '$msg', '$time')";

    if(!mysqli_query($con, $query)) {
        die('Error: '.mysqli_error($con));
    } else {
        $selectQ = "SELECT * FROM comment";
        $results = mysqli_query($con, $selectQ);
        echo "<ul>";        

        while($row = mysqli_fetch_assoc($results)) {
            echo "<li id='comment'><span>";
            echo $row['time']; echo "- </span><strong>";
            echo $row['user']; echo ": </strong>";
            echo $row['msg'];
            echo "</li>";
        }       

        echo "</ul>";
        exit();
    }
}
?>

同样，这只发生在 Firefox 上。在 Chrome 中工作。非常感谢任何帮助

Answer 1

使用e.preventDefault()停止提交按钮的默认动作

$(document).ready(function() {
  $(".comment-btn").click(function(e) {
    e.preventDefault();
    var user = $("#user").val();
    var msg = $("#msg").val();
    $.post("process.php", {user: user, msg: msg}, function(data) {
      $("#comments").html(data);
    });
  });
});