如何在JQuery中刷新当前页面?

1,160 阅读1分钟

有时,我们需要从一个javascript中手动重新加载一个网页。由于jquery是一个javascript框架。它可以很容易地做到这一点。

重新加载或刷新页面涉及到从缓存或服务器中检索数据和断言。断言是指来自服务器的javascript、HTML和样式。

有两种重新加载当前页面的方式。

  • 缓存刷新:重新加载一个当前页面,从缓存中获取数据。
  • 硬刷新:重新加载页面从服务器上获取数据

用Javascript来重新加载一个网页

在javascript中,你可以使用以下几行代码来刷新页面

location.reload(parameter);

默认参数是false ,从缓存中加载页面。

true强制重新加载网页:强制重新加载网页,从服务器上获取所有资产,如样式、js和HTML,清除缓存。

下面是一段代码,从缓存中重新加载一个页面。

location.reload() 
location.reload(false)

下面是一个从服务器上强制重新加载网页的代码

location.reload(true)

或者你也可以使用窗口全局对象,如下图所示

window.location.reload() // reload from a cache
window.location.reload(false) // reload from a cache
window.location.reload(true) // reload from a server

使用按钮点击事件重新加载一个页面

有时,我们想使用按钮点击事件来重新加载一个页面。

要从缓存中重新加载,使用下面的代码

<button type="button" onclick="location.reload(false);">Refresh A page</button>

要从服务器上重新加载,请使用下面的代码

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

使用Jquery在点击按钮时重新加载一个页面

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

使用历史记录来刷新页面

go() history 中的函数提供了一个重新加载页面的选项。

这里有一个HTML和javascript代码的例子,可以在点击按钮事件中重新加载一个当前页面。

<button type="button" onclick="refresh();">Reload</button>
<script type="text/javascript">

function refresh(){
 history.go()

}
</script>

另一种方法是使用window.location.href

window.location.href=window.location.href;

如何在ajax成功回调中刷新当前页面。

有时,我们想在成功收到AJAX请求后重新加载一个页面。

下面是一个使用AJAX进行发布请求的代码。

$.ajax({
    url: "API URL",
    method: POST,
    success: function(s,x){
        location.reload(true);
    }
});

响应为200代码时调用成功回调。

重载逻辑放在成功回调内,重新加载整个页面。

它有助于显示最新的CRUD操作。