php 异步读取json,php异步加载数据过程分享

本文详细介绍了如何使用PHP和Ajax实现网页无刷新滚屏加载数据的功能。通过获取浏览器可视区域高度,监听滚动事件,判断滚动条位置,当接近页面底部时触发Ajax请求,从result.php获取JSON数据并追加到页面中。示例代码清晰,适合初学者实践。
摘要由CSDN通过智能技术生成

无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新滚屏加载数据,例子非常的简单大家只要按流程来操作就可以了哦。

1.首先,我们要获取浏览器可视区域页面的高度

55b21c1da6753f8a8ae8afc2f5ce3528.png

2.然后,当滚动页面的时候需要做的事情是:计算页面总高度(当滚动底部时,页面新加载数据,所以页面总高度是动态变化的),计算滚动条位置(滚动条位置也是随着加载页面的高度动态变化的),然后构造一个公式,计算相对比例

b74ccfd0a5fa2bf32753c89e60c4ed6a.png

3.当滚动条接近页底时,触发ajax加载,在本例中我们使用jQuery的getJSON方法,向服务端result.php发送请求,请求的参数为page,即页数

dd96a4634d8ca0d94ed0ff189701c9a1.png

4.如果请求响应成功返回JSON数据,则解析JSON数据,并将数据追加到页面DIV#container后,如果没有JSON数据返回,则说明数据全部显示完毕

ef3cb096bc69d13c9059fa0188a27d5a.png

5.完整的jQuery代码如下

396902f13cc7d31a27d09503342bb9b6.png

6.result.php

当滚动到页面底部时,前端Ajax请求到result.php,该后台程序将根据请求的数据页数:page,查询数据表中对应的记录,并将记录集以json的格式输出返回给前端处理

2e7e601bc8845ce5a633eec9f64165bf.png

7.好了,本文的介绍到此结束,快去看看效果吧。

说明

一般异步加载都会用到AJAX调用方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值