ajax前进退按钮失效,Ajax加载页面浏览器前进后/退按钮失效的解决方案

1、使用Ajax局部刷新页面技术的几点不爽之处：

(1)、浏览器的前进/后退按钮失效。

(2)、加载页面刷新后，显示的是原始页,而不是加载后的页面。

(3)、加载后的页面，无法通过url分享，或进行收藏。

在Jquery下的解决方案：

1、既不使整个页面刷新，又能改变地址栏的URL，一种可行的方法就是采用锚点(anchor 对此陌生的码农参看html手册超链接，或下文 demo.PHP中a标签的href的值)。

2、通过jquery-hashchange插件，捕获url变动消息，响应$(window).hashchange()函数。

3、在该响应函数中，获取锚点，通过锚点值，向所加载页面传值。

下面例子概述：demo.PHP 为主页面，通过load(),默认加载demo1.PHP,当点击页面的“加载内容”链接时，通过load()加载demo2.PHP,此时，上述三个不爽之处，均已解决。

注意：demo.html中要自己加载上jquery插件和jquery-hashchange插件(链接地址已给出)。

demo.html

加载内容

$(function(){

$(window).hashchange(function(){//响应URL地址栏变动消息

var hash = location.hash;//获取锚点值

if(hash != false){

var url_arr = hash.replace(/^#/,'').split('/');//解析锚点中的参数

//加载页面，有参数时，默认采用post方法传递参数，

$('#content').load(url_arr[0],{ "username":url_arr[1],"userid":url_arr[2]});

} else {

$('#content').load('demo1.html');//默认加载页面。

}

})// End window.hashchange()

$(window).hashchange();

})

demo2.html

解析锚点通过，load()加载demo2.html

come from demo2.html

demo1.html

默认加载页面：come from demo1.html

参考文献：

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。