您的位置:首页 > Web前端 > JQuery

jQuery+Ajax+PHP实现异步分页数据显示--js可参考

2017-12-21 16:06 1046 查看
这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面。因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己的理解,做了一个比较简单的异步分页数据显示功能,这里使用的是jQuery+Ajax+PHP。
  先说说基本原理吧,其实就是翻页时使用Ajax向后台传递页面参数请求某个分页的数据,后台接收到参数之后就在数据库中查询相应的记录,然后以json的格式传输给Ajax,Ajax接收到数据后,使用jQuery在html页面上移除原来旧的分页数据,添加上新的分页数据,同时根据分页情况添加分页按钮栏。

  下面看看简单的代码实现:

1. html页面:

2. js代码:

        
}


3. PHP代码:

4. 分页按钮栏样式CSS:

5. 实现效果:





(总是显示五个数字页面按钮,数字跟着当前所在页面变化)

  其实,异步分页的应用还是挺广泛的,有些应用并不是很明显地看上去就是数据分页,但本质上还是异步分页,例如:一些网站上的“换一批”功能,其实就是异步分页的变形,我们只要把分页按钮栏的规则和显示效果修改一下就可以轻松实现了!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: