window.location.reload(true) 没有正确重新加载页面答案

【问题标题】：window.location.reload(true) not reloading the page correctlywindow.location.reload(true) 没有正确重新加载页面
【发布时间】：2017-08-18 19:49:38
【问题描述】：

我有一个 PHP 页面，它从 MYSQL 数据库中获取数据并根据从数据库返回的行生成 HTML 内容。

我正在使用 AJAX、Jquery 和 PHP 单击按钮时在数据库中添加新行。添加新行后，我使用window.location.reload(true); 重新加载页面。但是当我单击按钮时，不会显示与新行对应的 HTML 元素。但是，如果我使用 F5 手动刷新页面，则会显示新添加的内容。

有人知道为什么会这样吗？

下面是我点击按钮时调用的函数。页面 increaseCount.php 更新数据库以增加参与者的数量。但是在我使用 F5 刷新页面之前，不会显示与新计数对应的 HTML 元素。

        function increaseCountOfNewActor(characterName) {
            var actorName = document.getElementById("txt_actor_"+characterName).value;
            var actorImage = document.getElementById("img_actor_"+characterName).src;
            $.ajax( {
                url: "increaseCount.php",
                method: "POST",
                data: {
                    name: actorName,
                    image: actorImage,
                    character: characterName
                },
                success: function( data ) {
                    alert("Vote received");
                }
            } );
            window.location.reload(true);
        }

【问题讨论】：

比较苹果和苹果，而不是苹果和橙子...window.location.reload(true); 相当于ctrl+f5 - 在我看来，使用window.location.reload 更新页面内容是一种非常不寻常的方式 - 显示一些代码
你能显示一些代码吗？
我添加了一些代码。但这可能没有多大帮助。
你能试试location.reload();吗？ @TusharGarud
试过了。还尝试了许多其他方式的 location.reload，但没有奏效。

标签： javascript php mysql ajax

【解决方案1】：

在您的页面increaseCount.php 中考虑在末尾添加标题。

例如：

if(isset($_POST['name'] && 
   isset($_POST["image"] &&
   isset($_POST["character"]) {
       /* do your stuff here */
       header("Location: /thePageYouWantToRefresh.php");
       exit;
   }

【讨论】：

感谢@MoolsBytheway 的建议，但我已经尝试过了
不，这不是这个问题的正确答案。
代码本身有效，但它不是这个问题的答案。如果你有一个 ajax 调用，那么 1) 你不需要重定向 2) 重定向实际上是由客户端执行的，这是在这个特定实例中用于 ajax 调用的 xmlhttprequest 对象实例。该对象在它可以处理标头时将不存在，因为重新加载会删除它。
我明白你的意思:)，我想我误解了这个问题！

【解决方案2】：

问题是您将 ajax 与完整的页面重新加载混合在一起。

$.ajax 默认调用是异步的（第一个 a 来自 ajax...）。因此，它向increasepostcount.php 发送请求，然后立即重新加载页面——不等待increasepostcount.php 处理请求。当您手动刷新页面时，increasepostcount.php 将完成对 ajax 调用的处理，因此其结果会反映在页面上。

如果您使用 ajax，则不应使用页面重新加载。使用 javascript 根据 ajax 调用返回的结果更新显示这些记录的页面部分。

【讨论】：

赞！你的观察是正确的。

【解决方案3】：

您需要确保 ajax 调用已完成您想要的操作，在您的情况下为“window.location.reload(true);”在 ajax 响应之前运行，这是由于客户端和服务器之间的异步通信以避免屏幕上的“冻结”和无响应的用户体验。您必须将刷新代码放在成功 ajax 响应或完成：

   function increaseCountOfNewActor(characterName) {
        var actorName = document.getElementById("txt_actor_"+characterName).value;
        var actorImage = document.getElementById("img_actor_"+characterName).src;
        $.ajax( {
            url: "increaseCount.php",
            method: "POST",
            data: {
                name: actorName,
                image: actorImage,
                character: characterName
            },
            success: function( data ) {
                alert("Vote received");
                // to do here
               //window.location.reload(true);
            }
        } ).done(function () {
   // or to do here
    window.location.reload(true);
});
    }

【讨论】：