jQuery.post() 在 Firefox 中刷新页面，尽管异步：true答案

【问题标题】：jQuery.post() refreshing page in Firefox despite async: truejQuery.post() 在 Firefox 中刷新页面，尽管异步：true
【发布时间】：2010-08-30 12:50:26
【问题描述】：

这是我的第一篇文章，我觉得这很愚蠢。我已经回答过这个问题：https://stackoverflow.com/questions/511947?tab=newest#tab-top 虽然这仍然没有真正的帮助。

我有 3 个 PHP 页面。主页是上面所有 jQuery 的页面：

<body>
    <script type="text/javascript" src="includes/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // for each trade, load the current comparisons
            <?php
            foreach ($trades as $trade) {
                ?>
                $("#<?php echo $trade; ?>Div").load("functions/loadPriceSurveyComparisons.php", {
                    trade: "<?php echo $trade; ?>"
                });

                $("#addComp<?php echo $trade; ?>").click(function() {
                    $.post("functions/addPriceSurveyComparisons.php", {
                        trade: "<?php echo $trade; ?>",
                        alb: $("#albProd<?php echo $trade; ?>").val(),
                        comp: $("#compProd<?php echo $trade; ?>").val()
                    }, function(data) {
                        $("#<?php echo $trade; ?>Div").load("functions/loadPriceSurveyComparisons.php", {
                            trade: "<?php echo $trade; ?>"
                        });
                    }, "xml");
                });
                <?php
            }
            ?>
        });
    </script>

此页面基本上在加载时将项目列表加载到 div 元素中。 $.load 用于此。 $.load 有一个回调，它将点击事件处理程序分配给 3 个不同的 HTML 元素（因此 $trade 的 PHP 回显）。

这些点击处理程序基本上使用 $.post 执行 AJAX 请求。发布到的页面如下：

<?php
header("Content-type: text/xml");
include("../includes/db_connection.php");
$sql = "INSERT INTO pricesurvey_compare (alb_product_id, comp_product_id, trade)
    VALUES (".$_POST['alb'].", ".$_POST['comp'].", '".$_POST['trade']."')";
mysql_query($sql);
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
?>
<data>
    <trade><?php echo $_POST['trade']; ?></trade>
    <alb><?php echo $_POST['alb']; ?></alb>
    <comp><?php echo $_POST['comp']; ?></comp>
    <errors><?php echo mysql_error(); ?></errors>
</data>

这个 jquery.post() 请求由于某种原因刷新了 Firefox 中的页面，我没有看到任何错误生成。我什至无法在“网络”选项卡中查看带有萤火虫的请求，因为当页面刷新时，这已被清除。有趣的是，脚本选项卡中根本没有出现 javascript？但这是另一个令人头疼的问题，我现在不打算关注。

请注意，对于 jQuery，我几乎是个菜鸟。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

别忘了加e.preventDefault()

$("#addComp<?php echo $trade; ?>").click(function(e) {
  e.preventDefault();
  // ...
}

【讨论】：

Aaahhh，所以 e.preventDefault() 在点击处理程序中嘿？ :) 谢谢，这行得通！

【解决方案2】：

尝试添加

return false;

在您的“点击”处理程序中调用$.post(...) 之后。我不确切知道那些“addComp”元素是什么，但如果它们是导致表单提交的元素，那么您的问题是表单被发布两次：一次由您的“ click" 处理程序，并通过普通浏览器表单功能进行一次。

【讨论】：

对不起，但这不起作用。问题出在点击处理程序中。您所指的“addComp”元素是
我说过要在点击处理程序中进行。这就是我的回答中的短语“在您的“点击”处理程序中”的意思：-) 从事件处理程序返回 false 与调用 preventDefault() 的作用相同，而且它还停止了事件的“冒泡” .