ajax分页

jquery

前言

当页面内容较多时,往往采用分页的形式展示内容。其实用jquery封装的ajax函数就可以很简单地实现。ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。通过一个分页的小例子看看一个ajax的神奇之处。

一，先准备一些分页按钮，为其加点样式

按钮代码

二,分页内容写成代码片段

将对应按钮的文章内容写成一个独立的代码段，单独保存
示例文章代码

三，用load() 方法从服务器加载数据

jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

用each()方法遍历按钮获取它的index，为了简单，把那些代码片段的命名也和index相对应，所以就可以动态获取这些片段的url。看一下代码吧
jquery代码

四，将所有文件放到服务器上

本地测试的话可以放到本地服务器上，如放在xampp软件包的htdocs目录下，通过在浏览器中输入localhost+文件相对路径就可查看效果

后记

其实这个分页例子还不够完美，本来想动态加载内容时地址栏的url也可以指示当前是哪一页的，就像index.html?p=2这样的形式。但没有成功，用window.location.href实现了这样的形式，但ajax效果却消失了，不知道哪里出错了。我还想做上一页，下一页的效果。先占个坑，最近课业繁忙，以后再来填坑。