需要在当前页面添加一个按钮点击能刷新一次当前页面，如何实现这个功能呢？最简单直接的方法就是使用原生的 window.location.reload()方法来实现。

解决办法

方法一、直接在按钮上绑定实现 (最简单)

适用场景：简单的静态页面，或者不想写额外 JS 代码时。

优点：一行代码搞定，无需获取元素。

缺点：HTML 和 JS 逻辑混合，不利于大型项目的维护

<button onclick="location.reload()">点击刷新页面</button>

方法二、使用JavaScript脚本代码和代码实现

适用场景：现代网页开发的标准做法，尤其是单页应用或需要精细控制时。

优点：结构清晰（HTML 与 JS 分离），性能好，不依赖第三方库。

脚本必须放在按钮 HTML 代码的下方，或者放在 window.onload 事件中，否则会报错“找不到元素”。

<button id="refreshBtn">点击刷新页面</button>
<script type="text/javascript">
// 获取按钮元素
const btn = document.getElementById('refreshBtn');
// 添加点击事件监听
btn.addEventListener('click', function() {
    // 刷新当前页面
    // 参数 true 表示强制从服务器重新加载，忽略缓存 (可选)
    window.location.reload(); 
});
</script>

方法三、使用jQuery库和代码实现

适用场景：项目中已经引入了 jQuery 库。

优点：语法简洁，兼容性好（处理了老版本浏览器的差异）。

必须先引入 jQuery 库，且代码最好包裹在 $(document).ready() 中。

jquery库调用代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

前提条件需要页面调用jQuery库

<!--代码需要在JavaScript脚本代码前-->
<button id="refreshBtn">点击刷新页面</button>
<script type="text/javascript">
$('#refreshBtn').click(function() {
    location.reload();
});
</script>

总结

以上是实现点击按钮刷新一次当前页面的方法，使用哪种方法来实现点击页面刷新一次当前页面看自己喜欢