如何使用 jQuery 刷新页面？

Posted 2023-03-10

技术标签:

【中文标题】如何使用 jQuery 刷新页面？【英文标题】：How can I refresh a page with jQuery? 【发布时间】：2011-07-21 06:18:07 【问题描述】：

【问题讨论】：

由于 jQuery 是一个用于简单 DOM 操作和事件绑定的 javascript 框架，我建议您使用 javascript 而不是 jQuery。你不需要 jQuery。比以往任何时候都更相关：needsmorejquery.com @Stardust 你不需要 jQuery 来做任何你用 jQuery 做的事情，因为如果你能用 jQuery 做的话，用 JavaScript 一切皆有可能。 【参考方案1】：

使用location.reload():

$('#something').click(function() 
    location.reload();
);

reload() 函数采用一个可选参数，该参数可以设置为true，以强制从服务器而不是缓存重新加载。该参数默认为false，因此默认情况下页面可能会从浏览器的缓存中重新加载。

【讨论】：

这对我不起作用。这虽然有效：window.location.href=window.location.href; 这对我不起作用。 window.location.href=window.location.href; 和 location.href=location.href; 工作。 window.location.reload(true); 会硬刷新，否则默认为false @Sagar N，这也适用于我。谢谢你。过去几天我尝试了不同的方法，但你的解决方案救了我。 @FaridAbbas location.reload(); 是标准的 javascript。你不需要 jQuery。【参考方案2】：

有多种无限的方式来用JavaScript刷新页面：

location.reload()

history.go(0)

location.href = location.href

location.href = location.pathname

location.replace(location.pathname)

location.reload(false)

如果我们需要从再次访问网络服务器（例如文档内容的位置动态变化）我们会将参数传递为true。

您可以继续创作列表：

window.location = window.location window.self.window.self.window.window.location = window.location ...and other 534 ways

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) 
  (function(cMethod) 
    $body.append($("<button>", 
      text: cMethod
    ).on("click", function() 
      eval(cMethod); // don't blame me for using eval
    ));
  )(methods[i]);

button 
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;

button:hover 
  background: #27ae60;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

+1 表示列表和 jsfiddle。我有一个问题，在 jsfiddle 1 和 6 中，使生成的页面在重新加载时消失片刻，而 2-5 使页面重新加载“不明显”。在 chrome 的开发工具中，我可以看到页面正在重新生成，但你能解释一下重绘过程的不同吗？请。提前谢谢你。 @Cԃաԃ 我看不出有什么区别...也许缓存是问题？我很快就会去看看。 1 和 6 (reload()/(false)) 较慢。嗯。有趣的。 :) 和1和6一样reload()的默认参数是false。 location.href = location.href 是我通常使用的，但感谢其他人。很有用！ +1 @Cԃաԃ 最后我可以重现你所看到的，我问了here。【参考方案3】：

即使没有 jQuery，这也应该适用于所有浏览器：

location.reload();

【讨论】：

如果您想知道它的支持程度，这里是Can I use?【参考方案4】：

我想很多方法都行：

window.location.reload(); history.go(0); window.location.href=window.location.href;

【讨论】：

如果您的 URL 末尾有 #/hashbang example.com/something#blah，则此 window.location.href=window.location.href; 将什么都不做：如果有人想知道location.reload() 和history.go(0) 之间的区别是什么：没有。 w3.org/TR/html5/browsers.html#dom-history-go 的 HTML 5 规范的相关部分明确指出它们是等价的：“当调用 go(delta) 方法时，如果该方法的参数被省略或值为 0，则用户代理必须就像调用了 location.reload() 方法一样。" 唯一对我有用的是这个：window.location.href=window.location.href; window.location.href=window.location.href 为我工作【参考方案5】：

要使用 jQuery 重新加载页面，请执行以下操作：

$.ajax(
    url: "",
    context: document.body,
    success: function(s,x)
        $(this).html(s);
    
);

我在这里使用的方法是 Ajax jQuery。我在Chrome 13 上对其进行了测试。然后我将代码放入将触发重新加载的处理程序中。 URL 是""，表示此页面。

【讨论】：

投反对票。这并没有真正回答问题，而是展示了如何用 Ajax 响应替换页面的 HTML。这与重新加载页面不同：例如，我现在正在处理一种情况，这无法解决最初的问题。像这样重新加载整个 HTML 的一个问题是必须手动调用 onload/ready 事件并减轻对之前声明的变量的覆盖，您可能希望在刷新后保留其状态。除非您对代码非常小心，否则这将在您附加事件处理程序的地方导致内存泄漏，并且在替换它们附加的代码之前没有分离它们到。我正在使用它每秒重新加载我们的仪表板，零闪烁！这是穷人的彗星/json api。感谢@DanielLlewellyn 等人。警告。一些人评论说这种方法对于只刷新页面的一部分很有用。它不是。我认为那些人误解了$.ajax 的context 参数并期望它以某种方式执行某种魔术。它所做的只是set the this value of callback functions。对"" 的 URL 的 Ajax 将访问您当前所在的 URL，因此通常会加载完整的 HTML（包括 <html> 和 <head> 和 <body>），并且此答案中的任何内容都不会过滤掉您不使用的内容不想。【参考方案6】：

如果当前页面是由 POST 请求加载的，您可能需要使用

window.location = window.location.pathname;

而不是

window.location.reload();

因为如果在由 POST 请求加载的页面上调用window.location.reload()，将提示确认。

【讨论】：

然而，这将丢失查询字符串，而 window.location = window.location 不会然而，@mrmillsy window.location = window.location 也不完美；如果当前 URL 中有一个脆弱（hashbang），它什么也不做。【参考方案7】：

问题应该是，

如何使用 JavaScript

刷新页面

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

你被宠坏了。

【讨论】：

【参考方案8】：

你可能想使用

location.reload(forceGet)

forceGet 是一个布尔值和可选值。

默认为 false，从缓存中重新加载页面。

如果您想强制浏览器从服务器获取页面以摆脱缓存，请将此参数设置为 true。

或者只是

location.reload()

如果您想快速轻松地使用缓存。

【讨论】：

【参考方案9】：

具有不同缓存相关行为的三种方法：

`location.reload(true)`

在实现location.reload() 的forcedReload 参数的浏览器中，通过获取页面及其所有资源（脚本、样式表、图像等）的新副本来重新加载。不会从缓存中提供任何资源 - 从服务器获取新副本，而不在请求中发送任何 if-modified-since 或 if-none-match 标头。

相当于用户在可能的情况下在浏览器中进行“硬重新加载”。

请注意，Firefox（请参阅MDN）和 Internet Explorer（请参阅MSDN）支持将true 传递给location.reload()，但并非普遍支持，并且不是the W3 HTML 5 spec 的一部分，也不是the W3 draft HTML 5.1 spec ，也不是the WHATWG HTML Living Standard。

在不支持的浏览器（如 Google Chrome）中，location.reload(true) 的行为与 location.reload() 相同。

`location.reload()` 或 `location.reload(false)`

重新加载页面，获取页面 HTML 本身的新的、未缓存的副本，并对浏览器缓存的任何资源（如脚本）执行 RFC 7234 重新验证请求，即使它们是 @987654327 @ 是 RFC 7234 允许浏览器在不重新验证的情况下为它们提供服务。

据我所知，在执行location.reload() 调用时浏览器应该如何利用其缓存的确切方式尚未指定或记录；我通过实验确定了上述行为。

这相当于用户只需在浏览器中按下“刷新”按钮。

`location = location`（或无数其他可能的技术，涉及分配给`location` 或其属性）

仅当页面的 URL 不包含脆弱/hashbang 时才有效！

重新加载页面而不从缓存中重新获取或重新验证任何 fresh 资源。如果页面的 HTML 本身是新的，这将重新加载页面而不执行任何 HTTP 请求。

这相当于（从缓存的角度来看）用户在新选项卡中打开页面。

但是，如果页面的 URL 包含哈希，这将无效。

同样，据我所知，这里的缓存行为是未指定的；我是通过测试确定的。

所以，总而言之，你想使用：

location = location 最大限度地利用缓存，只要页面的 URL 中没有散列，在这种情况下，这将不起作用 location.reload(true) 无需重新验证即可获取所有资源的新副本（尽管它并未得到普遍支持，并且在某些浏览器（如 Chrome）中与 location.reload() 的行为没有什么不同） location.reload() 忠实再现用户点击“刷新”按钮的效果。

【讨论】：

+1 表示位置 = 位置；似乎没有多少人建议它，尽管它比提供的大多数答案都短，唯一的缺点是我猜它的可读性，而 location.reload() 更具语义 @Brandito 更重要的是，如果 URL 中有哈希，location = location 将不起作用。对于任何使用 fragids 的网站 - 甚至对于任何链接到页面的人可能会在 URL 中添加 fragid 的网站 - 这都会使其损坏。【参考方案10】：

window.location.reload() 将从服务器重新加载，并再次加载您的所有数据、脚本、图像等。

因此，如果您只是想刷新 HTML，window.location = document.URL 将返回更快且流量更少。但如果 URL 中有井号 (#)，则不会重新加载页面。

【讨论】：

这种行为在 Chrome 中是正确的，至少 - location.reload() 强制重新验证缓存资源，即使没有参数，而 window.location = document.URL 很乐意提供缓存资源而无需访问服务器，只要它们'重新新鲜。【参考方案11】：

jQueryLoad函数也可以进行页面刷新：

$('body').load('views/file.html', function () 
    $(this).fadeIn(5000);
);

【讨论】：

不，这不是页面刷新。【参考方案12】：

由于问题很笼统，让我们尝试总结一下可能的答案：

简单的纯 JavaScript 解决方案：

最简单的方法是以适当的方式放置单行解决方案：

location.reload();

很多人在这里缺少的，因为他们希望得到一些“点”，是 reload() 函数本身提供了一个布尔值作为参数（详情：https://developer.mozilla.org/en-US/docs/Web/API/Location/reload）。

Location.reload() 方法从当前重新加载资源网址。它的可选唯一参数是一个布尔值，当它是 true，导致页面总是从服务器重新加载。如果是 false 或未指定，浏览器可能会从其重新加载页面缓存。

这意味着有两种方法：

解决方案1：强制从服务器重新加载当前页面

location.reload(true);

解决方案2：从缓存或服务器重新加载（基于浏览器和您的配置）

location.reload(false);
location.reload();

如果你想将它与 jQuery 结合起来监听事件，我建议使用“.on()”方法而不是“.click”或其他事件包装器，例如更合适的解决方案是：

$('#reloadIt').on('eventXyZ', function() 
    location.reload(true);
);

【讨论】：

【参考方案13】：

这是一个使用 jQuery 异步重新加载页面的解决方案。它避免了window.location = window.location引起的闪烁。此示例显示了一个不断重新加载的页面，就像在仪表板中一样。它经过实战考验，正在时代广场的信息显示电视上运行。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() 
      $.ajax(
        url: "",
        dataType: "text",
        success: function(html) 
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        
      );
    
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

注意事项：

直接使用$.ajax就像$.get('',function(data)$(document.body).html(data))causes css/js files to get cache-busted一样，即使你使用cache: true，这也是我们使用parseHTML的原因 parseHTML will NOT find a body tag 所以你的整个身体需要进入一个额外的 div，我希望这块知识有一天能帮助你，你可以猜到我们是如何选择 id 的 div 使用 http-equiv="refresh" 以防 javascript/服务器出现问题，然后页面仍会在您没有接到电话的情况下重新加载这种方法可能会以某种方式泄漏内存，http-equiv 刷新修复了该问题

【讨论】：

【参考方案14】：

我找到了

window.location.href = "";

或

window.location.href = null;

还会刷新页面。

这使得重新加载页面删除任何哈希变得非常容易。当我在 ios 模拟器中使用 AngularJS 时，这非常好，这样我就不必重新运行应用程序了。

【讨论】：

拍得不错，我不知道。【参考方案15】：

您可以使用 JavaScript location.reload() 方法。此方法接受一个布尔参数。 true 或 false。如果参数为true；页面总是从服务器重新加载。如果是false；这是默认的或带有空参数的浏览器从它的缓存中重新加载页面。

带true参数

<button type="button" onclick="location.reload(true);">Reload page</button>

带default/false参数

 <button type="button" onclick="location.reload();">Reload page</button>

使用 jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() 
        location.reload();
    ); 
</script>

【讨论】：

【参考方案16】：

您不需要任何来自 jQuery 的东西，要使用 纯 JavaScript 重新加载页面，只需在 location 属性上使用 reload 函数，如下所示：

window.location.reload();

默认情况下，这将使用浏览器缓存（如果存在）重新加载页面...

如果您想强制重新加载页面，只需将 true 值传递给重新加载方法，如下所示...

window.location.reload(true);

此外，如果您已经在 window 范围，您可以摆脱 window 并执行以下操作：

location.reload();

【讨论】：

【参考方案17】：

使用

location.reload();

或

window.location.reload();

【讨论】：

OP 特别提到“使用 jQuery”（尽管很多人已经指出，这可能 不应该不是一个 jQuery 问题）【参考方案18】：

在按钮标签中使用onclick="return location.reload();"。

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

【讨论】：

【参考方案19】：

如果您正在使用 jQuery 并且想要刷新，请尝试在 javascript 函数中添加您的 jQuery：

我想在单击 h3 时从页面中隐藏 iframe，对我来说它有效，但我无法单击允许我开始查看 iframe 的项目，除非我刷新手动浏览器...不太理想。

我尝试了以下方法：

var hide = () => 
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
;

将简单的 Jane javascript 与您的 jQuery 混合应该可以工作。

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => 
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/$file\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);


// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

【讨论】：

【参考方案20】：

这里的所有答案都很好。由于问题指定使用 jquery 重新加载页面，我只是想为未来的读者添加更多内容。

jQuery 是一个跨平台的 JavaScript 库，旨在简化 HTML 的客户端脚本。

^~Wikipedia~

所以您会明白jquery 或jquery 的基础是基于javascript。因此，对于简单的事情，使用纯 javascript 会更好。

但如果您需要jquery 解决方案，这里有一个。

$(location).attr('href', '');

【讨论】：

【参考方案21】：

有很多方法可以重新加载当前页面，但是以某种方式使用这些方法，您可以看到页面已更新，但缓存值不会很少，因此请克服该问题，或者如果您希望提出硬请求，请使用以下代码.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

【讨论】：

【参考方案22】：

您可以用两种方式编写它。第一种是重新加载页面的标准方式，也称为简单刷新

location.reload(); //simple refresh

还有一个叫做硬刷新。在这里，您传递布尔表达式并将其设置为 true。这将重新加载页面，破坏旧缓存并从头开始显示内容。

location.reload(true);//hard refresh

【讨论】：

仅代码的答案在本网站上通常不受欢迎。您能否编辑您的答案以包含一些 cmets 或对您的代码的解释？解释应该回答这样的问题：它有什么作用？它是如何做到的？它去哪儿了？它如何解决OP的问题？请参阅：How to anwser。谢谢！【参考方案23】：

<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function()
   location.reload(true);
);
</script>

【讨论】：

【参考方案24】：

简单的 Javascript 解决方案：

 location = location;

&lt;button onClick="location = location;"&gt;Reload&lt;/button&gt;

【讨论】：

【参考方案25】：

可能最短（12 个字符） - 使用 history

history.go()

【讨论】：

【参考方案26】：

$(document).on("click", "#refresh_btn", function(event) 

     window.location.replace(window.location.href);
);

【讨论】：

【参考方案27】：

你可能需要使用

 location.reload()

或者也可能需要使用

location.reload(forceGet)

forceGet 是一个布尔值和可选值。

如果您想强制浏览器从服务器获取页面以清除缓存，请将此参数设置为 true

【讨论】：

【参考方案28】：

在 JavaScript 中最短。

window.location = '';

【讨论】：

【参考方案29】：

你们可能需要使用

    location.reload(forceGet)

forceGet 是一个布尔值和可选值。

默认为false，重新加载缓存的页面。

【讨论】：

【参考方案30】：

这对我有用。

function reload()
    location.reload(true);

【讨论】：

以上是关于如何使用 jQuery 刷新页面？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用jquery刷新视图组件而不刷新页面

如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？

无需刷新页面如何使用 ajax/jQuery 显示数据库中的值

如何通过将参数传递给 URL 来使用 jQuery 刷新页面

如何在使用 jquery 刷新页面后保持复选框在模式中的选中状态？

如何使用 jQuery 在不刷新页面的情况下更新 cookie 值？

如何使用 jQuery 刷新页面？

location.reload(true)

location.reload() 或 location.reload(false)

location = location（或无数其他可能的技术，涉及分配给location 或其属性）

`location.reload(true)`

`location.reload()` 或 `location.reload(false)`

`location = location`（或无数其他可能的技术，涉及分配给`location` 或其属性）