如何使用 jQuery Ajax 刷新页面？答案

【问题标题】：How to refresh page with jQuery Ajax?如何使用 jQuery Ajax 刷新页面？
【发布时间】：2011-01-02 22:20:56
【问题描述】：

我想在点击一些初始站点链接后，用 ajax刷新整个页面。

示例：

我们打开了网站 www.love.com，它有一个指向 www.love.com/somepage.html 的链接

点击此链接后，必须用ajax刷新整个页面（用somepage.html替换活动页面）

而且在页面被替换的时候，一定有淡入淡出的效果。

怎么做？

也许一些插件可以做到这一点，任何链接？

【问题讨论】：

整页刷新和Ajax相互矛盾
也许可以，但我希望通过 ajax 刷新页面
你为什么想要那个？所以你可以在加载时有一个动画 GIF 或者什么？ AJAX 并不是为了这个。如果您想访问完全不同的 URL，请不要理会 AJAX。如果您只想刷新页面的一部分，那就另当别论了。
这个人想要的和 ... 链接完全一样，except 他们希望当前页面淡出out，然后加载隐藏的新页面，然后淡入新页面。只是养眼。它在两个页面上都需要 AJAX。我认为有一种方法可以使用 script.aculo.us 做到这一点，但我不想查找它。

标签： jquery ajax refresh

【解决方案1】：

嗯，整页请求与 AJAX 的目的相矛盾，

但如果你坚持:) 您可以使用一个巨大的 div 作为页面的占位符，并使用 jQuery Load/Ajax

div 看起来像这样

<div id="yourhugediv"></div>

以及你可以使用的功能

function changeUrl(href)
{
   $('#yourhugediv').load(href);
   href = (href == "") ? "/" : href;
   uri = window.location.href.split("#/");
   window.location.href = uri[0] + "#/" + href;
}

手动将功能添加到您的链接

<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</>

或使用 jQuery 选择器迭代每个锚点

$('a').click(function()
{
    changeUrl(a.attr('href'));
});
$('a').attr('href','#');

【讨论】：

呃，如果这些是完整的 html 页面（即如果有）那么这将变得非常丑陋。

【解决方案2】：

我知道这是一篇旧帖子，但我认为您正在寻找的内容可以通过使用 BBQ jQuery 插件来解决：http://benalman.com/projects/jquery-bbq-plugin/

【讨论】：

【解决方案3】：

使用FAJAX（假AJAX）。它会给你你正在寻找的那种“酷”。在您的页面中使用这些元标记将使用淡入和淡出效果进行整个页面刷新。

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">

元标记仅在 IE 中有效，但在其他使用 JavaScript 的浏览器中也有一些方法可以得到类似的结果。

<html>
<head>
    <title>Page Title</title>
    <META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
    <META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
    <script type="text/javascript">
        function fadeInit() {
            document.body.style.opacity=0.2; // initialise
        }

        function fadeIn() {
            var bodyStyle=document.body.style;
            if ( bodyStyle.opacity < 1) {
                bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
                setTimeout('fadeIn();',100)
            }
        }
    </script>
</head>
<body onload="fadeInit();fadeIn();">

</body>
</html>

【讨论】：

想进一步解释一下吗？浏览器兼容性？我以前没见过这个符号

【解决方案4】：

听起来你正在尝试使用 jQuery，因为有人告诉你应该使用 jQuery - 链接标签自己完成这项工作，不需要任何脚本

好的 - 我们必须按照女朋友的吩咐去做...

我想你可以这样做：

$("body").load("next_page.html");

或

$("html").load("next_page.html");（这还能用吗？？）

【讨论】：

【解决方案5】：

由于其他页面在同一个域中，您可以抓取其他页面以检索您感兴趣的数据。您甚至可以将当前页面的整个正文标记替换为另一个正文标记的内容页面。

该过程将类似于：用户在当前页面上执行一些操作以触发所需的操作，JavaScript 发出 AJAX 请求以获取 somepage.html 并将结果存储在字符串中，JavaScript 等效于 innerHTML（或 jQuery.html( )) 用从 somepage.html 检索到的内容替换当前页面（或 div 或其他）的内容并添加特殊效果。

理论上，这将允许您将当前页面的内容完全替换为从 somepage.html 获取的内容。

【讨论】：

【解决方案6】：

只需创建一个指向那里的链接：

<a href="http://www.love.com/somepage.html">link text</a>

ps：虽然我有点困惑......您已经有一个指向该页面的链接导致新请求（整页刷新），为什么需要 AJAX 我想知道......

【讨论】：

它更酷，使用 ajax 刷新整页。怎么办，能帮忙吗？
@Glister：如果你做事是因为它们很酷，你可能会让用户的生活变得艰难。您应该做一些事情，因为它们是合理的，并且可以改善用户体验/可用性，而不是因为它们很花哨（还记得blink 标签吗？给你……）
@Felix，如果我不需要这个，我不会问