窗口位置重载（window.location.reload）无法正确重新加载页面

Question

我有一个PHP页面，从MYSQL数据库中获取数据，并根据返回的行生成HTML内容。我使用AJAX、Jquery和PHP在点击按钮时向数据库添加了一行新记录。添加新行后，我使用window.location.reload(true);重新加载页面。但是，当我点击按钮时，与新行对应的HTML元素不会显示。然而，如果我手动按F5刷新页面，则会显示新添加的内容。

有人知道为什么会出现这种情况吗？

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

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

- Tushar Garud

---

比较应该拿同类比较，而不是拿不同的东西比较。window.location.reload(true); 相当于 ctrl+f5 - 使用 window.location.reload 更新页面内容似乎是一种非常不寻常的方式 - 请展示一些代码。 - Jaromanda X

你能展示一些代码吗？ - ArSeN

我已经添加了一些代码。但这可能帮助不大。 - Tushar Garud

你可以尝试使用 location.reload(); 吗？@TusharGarud - LFlare

尝试过很多其他方法，包括location.reload，但都没有成功。 - Tushar Garud

@ Jaromanda：ctrl+F5 可以正常工作，但 location.reload(true) 的效果不同。 - Tushar Garud

Answer 1

问题在于你正在将ajax和完整页面重新加载混合使用。

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

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

- Shadow

---

太棒了！你的观察非常准确。 - Tushar Garud

Answer 2

您需要确保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);
});
    }

- Ahmed Mihoub

---

太完美了！现在是2022年，这个解决方案完美地解决了我的问题。我的情况与原帖中的错误相同，将.done(function)部分添加到我的ajax段中完美地解决了这个问题。谢谢！ - user1648968

Answer 3

在你的页面increaseCount.php中，考虑在末尾添加一个头部。

例如：

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

- moolsbytheway

---

谢谢您的建议@MoolsBytheway，但我已经尝试过了。 - Tushar Garud

不，这不是这个问题的正确答案。 - Shadow

代码本身是有效的，但它不是这个问题的答案。如果您有一个ajax调用，则1）您不需要重定向2）重定向实际上由客户端执行，这是在此特定实例中用于ajax调用的xmlhttprequest对象实例。该对象将在重新加载时被擦除，因此无法在处理标头时存在。 - Shadow

我明白你的意思：），我觉得我误解了问题！ - moolsbytheway