jQuery AJAX 分页和支持history hash

来源：互联网发布：企业网易邮箱端口号编辑：程序博客网时间：2024/06/07 11:33

导读：这个功能到学习是在之前到工作中遇到到，场景：页面数据在整个页面中某个区块进行分页显示，如果进行整体刷新，则会造成页面空白一段时间，所以，采用来无刷新。后来，需求说，如果我在第十页，想要发给朋友看，还得找半天。于是，这个功能就迫切需要来。

详细：

1 建立index.html

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>jQuery AJAX History - 无刷新更新，支持前进后退</title>  <style type="text/css">  #content {     border: 1px #666 solid;     width: 300px;     height: 300px;     padding:0.5em;}  </style>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>  <script type="text/javascript" src="http://xoyo.sinaapp.com/jquery.history.js"></script>  <script type="text/javascript" src="http://xoyo.sinaapp.com/ajax.js"></script>  </head><body>  <h1>无刷新更新，支持前进后退</h1>  <div id="ajax-links">    <ul>      <li><a href="#1">load Page a</a></li>      <li><a href="#2">load Page b</a></li>      <li><a href="#3">load Page c</a></li>    </ul>    <div id="content"></div>    <div>可以在更新后点击前进后退按钮测试</div>  </div></body></html>

2 加载来jquery.history.js插件

3 页面js代码

jQuery(document).ready(function($) {    function load(num) {        $('#content').load('http://xoyo.sinaapp.com/ajax.php?page=' + num);    }        $.history.init(function(url) {        load(url == "" ? "1" : url);    });        $('#ajax-links a').live('click', function(e) {        var url = $(this).attr('href');        url = url.replace(/^.*#/, '');        $.history.load(url);        return false;    });});

4 demo

http://xoyo.sinaapp.com