实现非刷新动态加载数据技术

实现非刷新动态加载数据技术
当我们浏览一些网页浏览器,当拉动滚动条底部的页面,页面会自动加载更多的内容供用户浏览。这种技术,我称它为滚在屏幕加载技术。我们发现很多网站使用这项技术,而且必须应用于技术,如图片搜索、新浪微博、QQ空间等。
滚屏加载技术是Javascript监测滚动条位置时使用滚动条出现在浏览器窗口的底部,触发一个Ajax请求背景的PHP程序,返回相应的数据,并返回数据添加到页面的底部,从而实现动态负载,是一个典型的Ajax应用。本文将使用jQuery,结合PHP,MySQL,和JSON,解释如何运用滚动到屏幕加载技术到您的项目。当然,阅读这篇文章的前提是,你需要jQuery和PHP的基础。
index.php
我们默认显示15个数据,所以我们首先显示数据库中显示的15个数据,在新加载的数据之后,我们每次显示15个数据。
为了解释尽可能简单,我使用的是原始的PHP和MySQL查询语句。首先,你需要连接数据库,包括连接信息的connnect.php。这里我定义了几个用户ID。
然后查询数据表,得到结果集,并循环输出,代码如下所示:

< PHP
require_once('connect。php);
用户名=阵列('demo1 ','demo2 ','demo3 ','demo3 ','demo4);
>

< PHP
为查询= mysql_query(SELECT * FROM说订单ID号限分别为0 );
而($行= mysql_fetch_array($查询)){
>


注意:本例中使用的数据来自本地站的文章:有一个介绍数据表的创建。
jQuery
1。首先,我们想获得浏览器的可视区域页面的高度。
复制代码代码如下:var = $(窗口)的调查。Height();
2, then, when scrolling the page needs to be done is to calculate the total height of the page (when the scroll at the bottom of the new page page load data, so the total height is dynamic), calculation of the scroll position (scroll position is with the highly dynamic change of loading the page), then construct a formula the calculation of relative proportion.

$(窗口)。滚动(函数(){)
无功pageh = $(文档。体)(的高度); / /页面的总高度
无功scrollt = $(窗口),ScrollTop(上); / /滚动
VaR AA =(pageh调查scrollt) /调查;
});
3,当滚动条接近页面底部时,它会触发Ajax加载。在这种情况下,我们使用jQuery的getJSON方法发送请求到服务器result.php,和请求的参数页面,即页码。

如果(aa<0.02){
美元。getJSON(的结果。PHP
的…
});
}
4、如果请求成功,返回的JSON数据,然后解析JSON数据页#容器div添加数据。如果没有返回JSON数据,将显示所有数据。

如果(JSON){
var;
$(JSON,函数(索引,数组))
var…;
$(#容器)。追加(STR); / /添加
});
1个页面
其他{ }
$(。空),表明()。Html(不滚,就不见了。);
返回false;
}
完整的jQuery代码如下所示:

$(函数(){())
VaR的调查=美元(窗口)(的高度); / /网页的可视区域的高度
var i = 1;设置当前页
$(窗口)。滚动(函数(){)
无功pageh = $(文档。体)的Height();
无功scrollt = $(窗口),ScrollTop(上); / /滚动
VaR AA =(pageh调查scrollt) /调查;
如果(aa<0.02){
美元。getJSON(的结果。PHP
如果(JSON){
var;
$(JSON,函数(下标,数组){)
var;
var str =+} { 'date阵列+ ;
var str =+} { 'author阵列+ ;
var str =+阵{ 'content' } + ;
$(#容器)追加(STR);
});
++;
其他{ }
$(。空),表明()。Html(不滚,就不见了。);
返回false;
}
});
}
});
});
result.php
当滚动到页面底部,前端AJAX请求result.php。后台程序将查询对应的记录在数据表中根据所请求的数据的页面数量:页面,输出记录集在JSON格式的前端处理。

require_once('connect。php); / /数据库连接

用户名=阵列('demo1 ','demo2 ','demo3 ','demo3 ','demo4);
页= intval美元(美元_get {页}); / /得到请求的页面
$开始= $页* 15;
为查询= mysql_query(SELECT * FROM说订单ID DESC LIMIT 15美元开始,);
而($行= mysql_fetch_array($查询)){
{ } =数组(数组元
内容= > $行{ 'content' },
作者= > $用户{ $行'userid'} { },
日期= >日期('m-d H:我行'addtime'},{美元)
);
}
回声json_encode($ ARR); / /转换为JSON数据输出
好了,这是这篇介绍的结尾,去看看效果吧。

以上是本文的全部内容,希望大家能喜欢。

tag:数据动态加载刷新技术电脑软件

相关内容