如何用jQuery/Javascript阻止页面刷新(F5)并通过Ajax更新局部内容？

当然有可行的方法啦！不过你之前的代码没生效是因为beforeunload事件的设计逻辑不是用来直接阻止页面刷新的，我来给你拆解问题并提供具体方案~

为什么你的原有代码不生效？ #

beforeunload事件的核心作用是给用户弹出确认提示（比如"你确定要离开吗？"），而不是让脚本直接拦截页面刷新/关闭操作。所以调用event.preventDefault()在这里是起不到阻止刷新的效果的。

方案1：拦截F5按键触发的刷新 #

如果要针对F5按键的刷新行为，我们可以监听键盘按下事件，捕获F5的按键码（116），然后阻止默认的刷新行为，再执行你的AJAX更新逻辑。

jQuery实现代码：

$(document).on('keydown', function(e) {
    // 检测是否按下了F5键
    if (e.keyCode === 116) {
        e.preventDefault(); // 阻止浏览器默认的刷新行为
        // 这里执行你的AJAX更新逻辑
        $.ajax({
            url: '/你的内容更新接口',
            method: 'GET', // 根据你的接口需求调整请求方式
            success: function(responseData) {
                // 用返回的数据更新页面指定区域
                $('#需要更新的容器ID').html(responseData);
                console.log('内容已通过AJAX完成更新');
            },
            error: function() {
                console.error('AJAX更新失败，请检查接口');
            }
        });
    }
});

方案2：处理浏览器刷新按钮的情况 #

如果用户点击浏览器自带的刷新按钮（而非F5），上面的键盘监听就无效了。这种情况下，我们只能通过beforeunload事件给用户弹出提示，引导他们使用你的AJAX更新方式，但无法完全阻止用户刷新页面（这是浏览器的安全限制，避免脚本强制限制用户操作）。

示例代码：

$(window).on('beforeunload', function(e) {
    // 返回提示文案，不同浏览器会用自己的样式展示这个提示
    const tipMessage = '你可以通过页面内的更新按钮刷新内容，无需重新加载整个页面哦';
    e.returnValue = tipMessage; // 兼容旧版浏览器
    return tipMessage; // 现代浏览器支持的写法
});

注意事项 #

• 不要过度拦截用户的刷新操作，确保你的AJAX更新逻辑稳定可靠，避免用户因为无法正常刷新而陷入困境。
• 如果你的页面有未保存的用户输入，结合beforeunload提示是很有必要的，但单纯为了强制用AJAX更新而拦截刷新，需要权衡用户体验。

内容的提问来源于stack exchange，提问作者wuase