引入jQuery及jQuery Mobile后页面无法完全刷新的问题求助

我之前也踩过这个坑！jQuery Mobile默认会把所有链接都转换成Ajax加载的跳转方式，导致页面不会完全刷新，而是显示Ajax加载器后渲染内容。要解决这个问题有几个实用的办法：

1. 全局禁用Ajax导航 #

如果希望整个项目都用普通页面刷新的方式跳转，可以在引入jQuery Mobile之前添加一段初始化代码，全局关闭Ajax功能：

// 这段代码必须放在jquery.mobile-1.4.5.min.js引入之前！
$(document).on("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

注意顺序：先引入jQuery，再放这段初始化代码，最后引入jQuery Mobile的脚本，这样配置才能生效。

2. 给单个链接禁用Ajax #

如果只需要针对部分链接关闭Ajax跳转，直接给对应链接加上data-ajax="false"属性即可：

<a href="/path/to/your/page" data-ajax="false">点击跳转（非Ajax）</a>

点击这个链接时，就会触发浏览器默认的页面刷新跳转，不会再出现Ajax加载器。

3. 针对特定页面禁用Ajax #

要是想让某个特定页面使用普通刷新，可以在页面的data-role="page"容器上添加data-ajax="false"属性：

<div data-role="page" data-ajax="false" id="target-page">
    <!-- 页面内容 -->
</div>

这样进入这个页面时，就会完全刷新页面，而不是通过Ajax加载。

这些方法都能轻松解决你遇到的Ajax跳转问题，根据你的项目需求选最合适的就行~

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