$.ajax+php实战教程之下拉时自动加载更多文章原理分析
一、纠结文章的风格
话说艺灵这个网站成立到现在快3年了,3年来,没怎么盈利。艺灵坚持不定期更新文章,对于文章的风格也在不断的调整。也不知道看官们都喜欢什么风格的文章,一直也没有看官反馈意见......
今天呢,艺灵将再次更换一种全新的风格--尝试采用由浅入深,由原理到简单案例再到实战流程的风格写一些教程文章。欢迎各位看官提出自己宝贵的意见。至于文章风格的改变,无疑是艺灵想尽可能让看官能够更直白、更清楚的明白文章讲的是什么、有什么用途以及看官能够学到些什么。(如果看官觉得读完文章后有所收获,可以拿起手机扫下文章下面的付款码,赞助下艺灵的付出,谢谢。)
二、引入案例
2.1、引入案例
不知道看官们玩qq空间不,如果玩过qq空间的看官应该能看到这样一个现象:浏览好友动态时,快浏览到最下面的时候,系统会自动加载一批好友动态。配结构图一张:今天呢,我们将来分析这个效果的原理,然后做一个简单的案例,明天再结合php+sql进行一个真实的案例讲解。
三、准备工作
我们还是先来看下如果想要实现这个功能都需要具备些什么吧!
1、任意一款编辑器,例如:Dreamweaver 、HBuilder、Sublime Text、EditPlus、Notepad++等;
2、会div+css布局;
3、有js或jq基础;
4、会使用ajax;
5、会php及sql语句查询;
下面我们将针对上面的准备工作进行一一突破!
3.1、解决编辑器问题
编辑器这玩意儿,就不需要多说了吧。直接上网搜索就是,然后下载下来后进行解压、安装之类的步骤。如果看官不会此步骤,建议浏览文章→→Dreamweaver Cs6安装 ,按照文章来进行安装Dreamweaver
软件。
3.2、解决div+css布局问题
前面说过,今天只讲一个简单的案例,所以我们只需要一个简单的布局即可。布局的话就以上面的分析图为例。在上代码前,艺灵建议看官根据上面的分析图进行自己写代码,标签随便用,但要注意核心内容。
3.2.1、html布局
- <!--主内容区-->
- <div class="main">
- <div class="main-body">
- 默认展示的内容
- </div>
- <div id="ylsj-load">点击加载更多内容......</div>
- </div>
有了布局,我们还需要css
对其进行美化。
3.2.2、css样式
- <style type="text/css">
- .main{width:1190px;border:1px solid #ccc;margin:10px auto}
- .main-body,.ylsj-main{height:1600px;background:#ddd;margin:0 auto}
- .ylsj-main{background:#B5F3C3;}
- #ylsj-load{width:90%;border:1px solid #ccc;height:40px;line-height:40px;margin:10px auto;font-size:12px;color:#888;border-radius:8px;text-align:center}
- </style>
来张上面源码展示的效果图吧!配图:
好了,布局这一步也搞定了,接下来开始有点难度了哦!
四、js/jq做什么?
不知道看官有没有注意,此时艺灵已将jq
单独拿出来讲了,毕竟这个不是一两行代码就能说得清的。我们还是来进行进一步分析下这个案例的效果吧!
默认情况下,我们从上向下浏览好友动态,此时如同浏览正常网页;当快浏览完好友动态时,普通的网页是见到了底部,已经没有内容了,而腾讯的呢?他是自动又进行了加载,然后将数据插入到页面中,由于页面有了新的数据,所以此时浏览器滚动条距离底部还有很长一段距离,此时我们仿佛又回到了之前的状态,继续下拉浏览。当再次快要拉到底的时候,数据又进行加载并填充,然后又是继续浏览,如此反复......
那么问题来了!
1、如何知道用户快要浏览完内容呢?
2、快浏览完时怎么去触发自动加载事件呢?
既然有问题,那我们就得去解决问题。
不知道看官有没有注意刚才艺灵的描述,描述中有一个关键点滚动条!
那滚动条可干嘛呢?在我们这个案例中起什么作用呢?
我们可以计算滚动条距离页面顶部的距离呀!
计算这个距离有什么用呢?
单独这个距离是没什么用,但别忘记了,html
源码中还有一个#ylsj-load
的标签!有没有发现上面的配图中并没有看到这个#ylsj-load
?
咦!对啊,我怎么没有看到呢?去哪儿了?
没有看到就对了,要是看到了,那就起不到作用了!
之所以看到不到,是因为他在下面,被默认内容撑下去了。前面说了,浏览器滚动后可以得出一个滚动的高度,此时这个#ylsj-load
距离顶部也是有一个高度的。当#ylsj-load
快要显示的时候也就表示着快到拉到底了,配图:此时我们就需要去触发加载了。
至此,我们刚提的两个问题就已经解决了,现在来写jq
代码吧!
4.1、jq判断是否快到拉到底部
4.1.1、jq判代码
- <!--引入jquery库,建议1.8版本以上,如果页面中已引入,可忽略此库-->
- <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
- <script>
- /*页面滚动*/
- $(window).scroll(function(){
- var t=$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/
- var h=$(this).height();/*获取当前窗口的高度*/
- var h1=$('#ylsj-load').offset().top;/*获取按钮距离浏览器顶部的值*/
- /*用按钮的值-滚动条的值与窗口高度进行比较,如果小时,则表示按钮进入可视区,同时也表示滚动条即将到达底部*/
- if(h1-t<h){
- /*弹出一个窗口,提示用户下面没有内容了*/
- alert('别往下拉了,下拉就没有了!');
- }
- });
- </script>
此时我们去刷新页面,尝试向下拉动滚动条,快到底部时可以看到有弹窗提示。配图:
既然可以看到弹窗,表示我们的js代码成功了。接下来就是添加数据了。
4.2、触发点击事件添加数据
今天我们不讲ajax和php,明天再讲。今天只讲一个简单的点击加载数据操作。
由于我们今天没有数据,那就用一个盒子充当数据吧。
现在数据有了,但又有新的问题!
1、点击事件怎么写?
2、新的“数据”如何插入到页面中?
4.2.1、点击事件
- <script>
- $('#ylsj-load').click(function(){
- alert('点我想干嘛?加载数据??');
- });
- </script>
此时我们手动去点击“点击加载更多内容......”这个按钮会看到有弹窗提示,配图:
4.2.2、插入内容
- $(this).before('<div class="ylsj-main">加载的数据外框架<\/div>');
我们将上面的代码放到4.2.1
中,替换掉原alert
弹框。再次点击时配图:
好了,差不多了。但是有一个问题:现在是点击才去进行加载,如何做到让他自动加载呢???
这个作为今天的作业吧。友情提示:建议回头看4.1.1
的代码片段。明日会继续进行后续讲解。
上次留下的问题不知道看官们有没有解决,没有解决的看下面的答案吧。
4.4、自动加载思路
我们在4.1
中已经可以判断出滚动条是否快到拉到底部,在4.2
中我们又做出了点击事件和加载“数据”的步骤,所以我们这个自动加载可以将4.1
和4 2
结合起来。也就是说:当滚动条快拉到底部时,我们让它去触发点击事件。
4.5、自动加载源码
4.5.1、完整jquery代码
- <!--引入jquery库,建议1.8版本以上,如果页面中已引入,可忽略此库-->
- <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
- <script>
- $(window).scroll(function(){
- var t=$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/
- var h=$(this).height();/*获取当前窗口的高度*/
- var h1=$('#ylsj-load').offset().top;/*获取按钮距离浏览器顶部的值*/
- /*用按钮的值-滚动条的值与窗口高度进行比较,如果小时,则表示按钮进入可视区,同时也表示滚动条即将到达底部*/
- if(h1-t<h){
- /*这里将之前的弹窗改成点击事件*/
- $('#ylsj-load').click();
- }
- });
- var i=0;
- $('#ylsj-load').click(function(){
- i++;
- $(this).before('<div class="ylsj-main bg_'+i+'">加载的数据外框架,已加载'+i+'次<\/div>');
- });
- </script>
案例欣赏:
怎么样,是不是有点感觉了?
接下来我们继续向下进行。
五、使用ajax发送请求
5.1、ajax格式
这个ajax的话呢,其实也不是多难,我们还是要先写好框架,然后再进行替换上面的代码。
5.1.1、ajax发送请求代码
- $.ajax({
- type:"/*类型,post或get*/",
- url:'要请求的php文件地址',
- data:{/*要传递的参数*/},
- dataType:"/*数据类型,html、json、xml等*/",
- success:function(data){
- /*成功时返回数据*/
- },error:function(jqXHR){
- /*失败时进行提示*/
- }
- });
上面的代码怎么用呢?
其实我们只要稍微思考下就行了。上面是代码,代码需要去执行啊!既然是需要去执行,那什么时候才去执行呢???
当然是点击的时候去触发ajax了!好,我们继续来完善我们的代码。
5.2、ajax和jquery进行结合
5.2.1、ajax和jquery进行结合
- <!--引入jquery库,建议1.8版本以上,如果页面中已引入,可忽略此库-->
- <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
- <script>
- var i=0;/*定义一个变量,等会用来控制多次触发*/
- $(window).scroll(function(){
- var t=$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/
- var h=$(this).height();/*获取当前窗口的高度*/
- var h1=$('#ylsj-load').offset().top;/*获取按钮距离浏览器顶部的值*/
- /*用按钮的值-滚动条的值与窗口高度进行比较,如果小时,则表示按钮进入可视区,同时也表示滚动条即将到达底部*/
- if(h1-t<h){
- if(i==0){/*防止快速下拉时多次触发*/
- i=1;/*改变i的值*/
- /*这里将之前的弹窗改成点击事件*/
- $('#ylsj-load').click();
- }
- }
- });
- $('#ylsj-load').click(function(){
- /*将原来这里的内容替换成ajax动态获取数据*/
- $.ajax({
- type:"/*类型,post或get*/",
- url:'要请求的php文件地址',
- data:{/*要传递的参数*/},
- dataType:"/*数据类型,html、json、xml等*/",
- success:function(data){
- /*成功时返回数据*/
- i=0;/*然后恢复状态,否则继续下拉时不能继续执行*/
- },error:function(jqXHR){
- /*失败时进行提示*/
- }
- });
- });
- </script>
上面的代码中还有一些参数没有修改,因为这些参数要根据我们接下来的php进行修改。
六、php文件
6.1、分析php文件做什么事情
这个php文件里面有什么内容呢?具体内容还是要根据我们具体的案例来进行写代码。
举个例子:我们要做一个下拉时自动加载文章的效果。既然是加载文章,所以我们需要知道以下这些数据:文章标题、文章简介、文章缩略图、发表日期、来源网站、作者、阅读量、评论数等等。这些数据都需要通过这个php
文件传递给我们上面的ajax
。
6.2、sql语句查询信息
既然是传递数据,我们就需要去查询数据。不可能说直接把信息写死,这是不现实的!所以,这个php
文件中还要有我们的sql语句。
哦卖糕的!前面的jquery
还能稍微理解,后面的ajax
完全不能理解,更不用提什么php
和sql
查询了。想必部分看官会有这样的感想。
那怎么办呢?按照文章思路去学习对应的知识呗!如果只知道copy
代码而不知道原理及流程的话,换个地方又不会使用了。
七、最后
下拉时自动加载的原理大致就是这样,对于源码,基本上是大同小异。下次艺灵将会调用几个网站管理系统中的数据来做成插件,到时需要的看官可根据自己的需求进行下载对应的插件。
最新文章
- 怎么提升软件测试质量,【软件测试】涨姿势,测试总监亲授如何做测试质量管理...
- 此人提出平行线可以相交遭嘲讽,郁郁而终,12年后却被认可
- php 接口有几种,【后端开辟】php接口有哪些范例?
- linux64bit安装mysql、jdk、nodejs、nginx笔记
- ESXi 5.1 安装 Mac OSX Lion 10.7
- appium-python 学习记录
- 主题抽取的核心——主题词表
- 大学java web教材_Java工程师必备干货教材 《Java Web开发实战》
- OSPF配置命令总结
- 自动驾驶:车道线检测、车速检测、实时通行跟踪、基于视频的车辆跟踪及流量统计
- ISA TEST黑客过关小游戏第二关解密
- 国内的 App 推广渠道有哪些?
- 银行中台与互联网中台有什么不同?该怎么建?
- hyper用vnc连接,hyper用vnc连接该如何设置vnc
- 自然语言处理(二)基于CNN的新闻文本分类
- RuntimeTransformGizmo:位移、旋转、缩放插件
- chai断言库学习3-Core Plugin Concepts
- 汇总-13台虚拟机搭建一个高可用负载均衡集群架构
- GPT 分区如何调整为 MBR 分区
- 直播预告 | openGauss自治运维能力的技术演进分享