Question

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

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

任何人都知道为什么会发生这种情况？

下面是我点击按钮时调用的功能。页面increaseCount.php更新数据库以增加actor的数量。但是，在使用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);
        }

Answer 1

问题是你正在混合ajax和完整的页面重新加载。

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

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

Answer 2

在您的网页increaseCount.php中

考虑在最后添加标题。

例如：

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

Answer 3

你需要确保ajax调用已经做了你想做的事情，在你的情况下是“window.location.reload（true）;”由于客户端和服务器之间的异步通信以避免屏幕上的“冻结”和无响应的用户体验，因此在ajax响应之前运行。您必须将刷新代码放在Success ajax response或done：

上

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

window.location.reload（true）没有正确地重新加载页面

3 个答案: