当前位置:首页 > 日记 > 正文

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

实现非刷新动态加载数据技术
当我们浏览一些网页浏览器,当拉动滚动条底部的页面,页面会自动加载更多的内容供用户浏览。这种技术,我称它为滚在屏幕加载技术。我们发现很多网站使用这项技术,而且必须应用于技术,如图片搜索、新浪微博、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数据输出
好了,这是这篇介绍的结尾,去看看效果吧。

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

相关文章

在math.atan使用Javascript()方法探讨

在math.atan使用Javascript()方法探讨

方法,电脑软件,math,atan,Javascript,此方法返回的弧度逆切,在方法返回一个非PI 2和PI / 2弧度之间的值。 语法 math.atan(X); 下面是参数的详细信息: X:一个数字 返回值: 返回一个数的弧度反正切 实例uff1a Javascript Math atan()方法 VaR值= math…

excel2010表自动保存和自动备份功

excel2010表自动保存和自动备份功

自动保存,教程,自动备份,功能,电脑软件,在excel2010运行事故总是难以避免。如何最大限度地减少用户流失已成为Office 2010发展的重点。 自动保存文档未保存;听起来是不是有些绕嘴,但事实上它的Office 2010在事故的保护是一个重大的任务。相…

PS电子补习教程,后修电子商务

PS电子补习教程,后修电子商务

教程,电脑软件,PS,今天我们为您带来了ps的图片教程,用于修复后期的业务。教程比较实用。淘宝的艺术家朋友很值得学习。建议一起学习。 这张电子商务图的修复手册非常实用。我推荐它。我希望它能帮助我的朋友。我喜欢记住它。 本教程结束,以上…

Excel删除超链接的最佳方式是excel

Excel删除超链接的最佳方式是excel

删除,超链接,方式,基础,电脑软件,对于excel表单中的超链接数据,一个点将跳转到Web窗口。有时不需要取消数据的超链接。 1,选择删除链接数据,复制返回。 2、在选择Excel的功能,其他的命令,校对,自动更正选项,当输入时,自动格式-互联网和网络路径改…

烟花画可调三维饼图法

烟花画可调三维饼图法

饼图,可调,烟花,电脑软件,这篇文章教你如何用烟火画一个可调的三维饼图。 奶茶猫正忙着学习密码。这篇文章带来了一个新的烟花系列教程给你的腐败猫。让猫的成人魔术手指引导你完成FW中级绘图教程。本教程提供了源文件的网盘地址。…

你应该知道PHP浮点知识。

你应该知道PHP浮点知识。

知识,浮点,你应该知道,电脑软件,PHP,PHP是一种弱类型语言。这样的特点必然要求无缝、透明的隐式类型转换,和PHP使用变量来存储任何类型的数值。机制的结构如下:(5.2)为例。 复制代码代码如下所示: 结构_zval_struct { 变量信息 zvalue_value…

CDR只是一个可爱的卡通角色效果。

CDR只是一个可爱的卡通角色效果。

只是一个,角色,卡通,效果,可爱,本教程是简要介绍CDR,这是一个简单的方式来创建可爱的卡通人物。课文很可爱,很难。很适合初学者学习。 该教程教朋友使用CDR制作卡通人物。这门课不是很难。写作效果是相当可爱和美丽。转发与朋友分享学习,首先…

Javascript使用推送方法将元素添加到数组

Javascript使用推送方法将元素添加到数组

推送,方法,数组,元素,结尾,本文演示了Javascript使用一个元素如何使用推送方法将一个元素添加到数组的结尾: 下面的代码演示JS数组通过推送方法将元素添加到数组的结尾。 单击按钮将新元素添加到数组中。 试试 香蕉 函数myFunction() { Fruits.p…

在支持使用教程()在JavaSciprt处理字

在支持使用教程()在JavaSciprt处理字

字符串,使用教程,支持,方法,电脑软件,这种方法使字符串显示为超市,如果它是一个标签。 语法 String.sup() 下面是参数的详细信息: Na 返回值: 带标记返回字符串 实例uff1a 字符串支持()方法 新字符串(Hello); 警报(str.sup()); 这将产生以下结果: …

如何使用工作簿模板WPS表教程

如何使用工作簿模板WPS表教程

教程,模板,如何使用,工作,电脑软件,在启动Excel 2013之后,用户可以创建一个空白文档和一个Office的设计模板来根据需要创建一个文档。下面是Excel 2013工作簿模板的使用。 1,启动Excel 2013,程序窗口列出常见的文档模板,鼠标单击需要使用的模板…

美丽的蝴蝶公主插画画家画家教程

美丽的蝴蝶公主插画画家画家教程

教程,画家,插画,蝴蝶,公主,美的效果是很复杂的,特别是在注意时间的时候要注意尺度好,不要太亮,不要太强,这样梦的效果可以呈现得更加清晰和明显。 最终效果 1、打开comicstudio软件,建立一个新的页面,画个草图,用钢笔工具的G笔和笔线。钩应注重…

在Excel中为指定的数据源标记重要

在Excel中为指定的数据源标记重要

数据源,中为,标记,基础,电脑软件,经常在考试的时候,老师会去做一个Excel表格,然后使用一些成就一些特殊的颜色或符号,如超过90是什么颜色,什么颜色的100以上,110以上的颜色,然后,根据颜色,你可以清楚地看到教师考试的总体水平是什么。让我解释如何…