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

<html >
<script type="text/javascript" src="js/jquery.min.js"></script><!--引入jquery-->

<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<!---引入jquery-hashchange下载地址:http://benalman.com/projects/jquery-hashchange-plugin/
-->
<!--引入jquery-hashchange插件-->
<body >
<meta charset="utf-8">
<a href="#demo2.html/username/uerid">加载内容</a><!--锚链接传值信息。-->
<div id = "content">
  <!--动态加载区-->
</div>
<script type="text/javascript">
 $(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();

 })

 </script>
<body>
</html>

 

demo2.html

<div>
<!--参考的 php接收参数代码
 $_POST['username'];
    $_POST['userid'];
-->

 解析锚点通过,load()加载demo2.html 
    come from demo2.html</div>

 

demo1.html

<div>
 默认加载页面:come from demo1.html</div>

参考文献:

http://xinple.org/?p=410

相关文章
相关标签/搜索