Question

我正在努力的客户正在努力使其页面永远不必重新加载。相反，他只想使用AJAX。现在我意识到我这样做的方式并不是一种非常有效的方式，但它是最简单的，你会明白为什么你会看到他的网站..

我正试图让它工作，以便AJAX只刷新部分页面或整个页面。

我的代码是：

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script>
            function refresh (update) {
                $.get(location.href, function (data) {
                    console.log(data);
                    var EL = $(data).find(update);
                    var HTML = $('<div>').append(EL.clone()).html()
                    alert(HTML);
                    $(update).replaceWith(HTML);
                });
            }
        </script>
    </head>
    <body>
        <div style="font-size: 64px;">The current timestamp is <b class="time"><?php echo rand(999, 9999999); ?></b></div>
        <br><br>
        <button onclick="refresh('.time')">Refresh Time</button>
    </body>
</html>

首次加载页面时，PHP会生成一个随机数。点击刷新按钮假设刷新此数字。但是，同样的数字仍然存在。请求返回完全相同的页面，而不是返回带有新编号的页面。

同样，人们注意到我知道这不是一种非常有效的方法，但它是我试图让它发挥作用的方式

我做错了吗？（除了在实际使用部分时请求整个页面）

修改

您可以在此处试用：http://methods.x10.mx/projects/refreshPageParts.php

Answer 1

将您的通话更改为此，以打破缓存：

function refresh (update) {
    $.ajax({
        type: "get",
        cache: false,
        url: location.href,
        success: function (data) {
            $(update).replaceWith($(data).find(update));
        }
    });
}

请参阅文档中有关缓存的说明：http://api.jquery.com/jQuery.ajax/

默认情况下，始终会发出请求，但浏览器可能会从缓存中提供结果。要禁止使用缓存的结果，请将cache设置为false。要在自上次请求后资产未被修改时导致请求报告失败，请将ifModified设置为true。

Answer 2

我在我的本地wamp堆栈上测试了你的例子，它运行正常！

顺便说一下：你忘记了以下一行之后的分号（虽然没有必要）

var HTML = $('<div>').append(EL.clone()).html();

编辑：您的代码正在运行...也在您提供的网址上。奇怪的是你必须等待几分钟才能正常工作。因此，当您访问该页面并按下按钮时，时间将不会更新...但是如果您等待几分钟它将...只有一次然后您必须再次等待。我打赌你的服务器正在缓存页面。所以你的问题是服务器端...禁用缓存它会工作!!

编辑：您也可以尝试使用虚拟参数（例如

）使get url动态化

http://methods.x10.mx/projects/refreshPageParts.php?v=dummy

也许你不必制作虚拟动态，也可以使用静态变量。我很好奇，让我知道; - ）

使用JavaScript重新加载页面（或页面的一部分）

修改

2 个答案: