jqueryMobile页面跳转ajax载入与缓存问题

2018-05-30编程教程
67

页面跳转ajax载入在jqueryMobile的开发当中我们经常会遇到一些问题:
 
1、无法跳转到后一个页面
2、跳转到后一个页面事件或样式失效,需刷新一次可恢复正常
原因:JQM,为了是页面访问速度加快,每一个链接都是通过ajax 方式进行载入,不会加载新页面head 区域的内容。
            一般我们引入的css和js都会在head里面,所以我们事件或样式的失效就不足为奇了。
            而不重新加载新页面head 区,下面js调用就可能出错,这也许就是为什么无法跳到后一个页面的原因吧。
 
解决办法:
1、a标签中加入属性(禁止局部ajax跳转)
 
data-ajax="false"
2、a标签中加入属性(禁止局部ajax跳转)
 
rel="external"
3、载入页面是在js中加入代码(禁止全局ajax跳转)
 
$.mobile.ajaxEnabled=false;
通过AJAX 方式进行载入的可用之处
 
1、页面访问速度加快
2、返回上一个页面定位到原来的位置,这个其中很有用。类似刷微博,不用每次跳转页面回来从头刷
注意
既然ajax载入不会加载head区,那后面一个页面要用到的css和js都要一次引入,并且两个页面定义的ID不能重复
缓存问题
链接时,通过 AJAX, 将链接页面的PAGE 部分,载入至 首页。 而为了防止内存占用过高,使浏览内存较低的设备出现浏览器崩溃的情况。 JQM 只会缓存一个页面至页面中 。当请求另一个页面时,即将上一个页面的PAGE 区的DOM 移除。当在返回这个页面时,从历史记录中,重新加载该页面。
 
强制缓存页面的方法
 
在页面的page 上加入
 
data-dom-cache="true"
或者js中加入
 
$.mobile.page.prototype.options.domCache = true;
页面预加载(a链接上加入data-prefetch="true")
 
//a链接
<a href="#" data-prefetch="true"> ... </a>
//js也可以
$.mobile.loadPage(PageUrl,{showLoadMsg: false });
解决了page缓存的问题,那么又会遇到page里的js问题。例如我希望把page的dom缓存下来,但是我又希望每次这个page显示的时候,触发执行一些js,那么这个时候我们在对应page的事件处理时,就不能用 pageinit而是要用pageshow了,因为pageinit只在这个page从dom加载进来时触发,如果page缓存了,那么pageinit只会在第一次时触发。
 
$("#page_id").bind("pageshow",function(){
//页面每次显示你需要做的
})
除了pageshow,还有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件响应,都是可以针对不同的需求使用的。
// 去掉缓存 重新加载
 
1. 是否有加 data-dom-cache="true",有的话直接去掉,
 
2.    使用$.mobile.changepage(B页面,{reloadpage:true});
The End
ajax

相关推荐

Ajax中文传值出现乱码的解决办法
Ajax技术的核心为Javascript,而javascript使用的是UTF-8编码,因此在页面采用GBK或者其他编码,同时没有进行编码转换时,就会出现中文乱码的问题。 以下是分别使用GET和POST方式传值,并且页面采用GBK和UTF-8编码在IE和FF下的不同测试结果和出现乱码时的解...
2022-11-19 编程教程
364

jqueryMobile页面跳转ajax载入与缓存问题
页面跳转ajax载入在jqueryMobile的开发当中我们经常会遇到一些问题: 1、无法跳转到后一个页面 2、跳转到后一个页面事件或样式失效,需刷新一次可恢复正常 原因:JQM,为了是页面访问速度加快,每一个链接都是通过AJAX 方式进行载入,不会加载新页面head 区...
2018-05-30 编程教程
67

PHP怎么使用AJAX返回登录成功信息!
以下是完整参考代码,index.php为登录页面,ajax.php为处理ajax无刷新请求页面。 index.php !DOCTYPE htmlhtml head meta charset=utf-8 / title登录/title script type=text/javascript src=http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js/script /hea...
2018-05-07 编程教程
118

如何设置jquery的ajax方法为同步
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: some.php, async: false}).responseText; 或者在全局设置Ajax属性 $.ajaxSetup({ async: false }); 再用post,get就是同步的了...
2018-05-03 编程教程
191

ajax请求中传递的参数中如果含有特殊字符怎么处理?
在JQUERY AJAX开发中遇到了下面的一个问题,在执行AJAX请求的时候,需要传递一个50%的参数,而这个参数中含有特殊字符%。这样的话就会出现问题了,我们知道服务器在发送请求的时候,会将url中的参数转化成类似于%2C%2F%3F%3A%40%26%3D%2B%24%23,所以在我们...
2018-05-03 编程教程
91

详解JSON对象与字符串之间转换实例
在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递。 例如:前台按类的格式...
2018-05-02 编程教程
182