$.ajax+php实战教程之下拉时自动加载更多文章原理讲解

一、纠结文章的风格 话说艺灵这个网站成立到现在快3年了，3年来，没怎么盈利。艺灵坚持不定期更新文章，对于文章的风格也在不断的调整。也不知道看官们都喜欢什么风格的文章，一直也没有看官反馈意见...... 今天呢，艺灵将再次更换一种全新的风格--尝试采用 由浅入深，由原理到简单案例再到实战流程 的风格写一些教程文章。欢迎各位看官提出自己宝贵的意见。至于文章风格的改变，无疑是艺灵想尽可能让看官能够更直白、更清楚的明白文章讲的是什么、有什么用途以及看官能够学到些什么。 (如果看官觉得读完文章后有所收获，可以拿起手机扫下文章下面的付款码，赞助下艺灵的付出，谢谢。) 二、引入案例 2.1、引入案例 不知道看官们玩qq空间不，如果玩过qq空间的看官应该能看到这样一个现象：浏览好友动态时，快浏览到最下面的时候，系统会自动加载一批好友动态。配结构图一张： 今天呢，我们将来分析这个效果的原理，然后做一个简单的案例，明天再结合 php + sql 进行一个真实的案例讲解。 三、准备工作 我们还是先来看下如果想要实现这个功能都需要具备些什么吧！ 1、任意一款编辑器，例如： Dreamweaver 、 HBuilder 、 Sublime Text 、 EditPlus 、 Notepad++ 等； 2、会p+css布局； 3、有js或jq基础； 4、会使用 ajax ； 5、会 php 及 sql语句查询 ； 下面我们将针对上面的准备工作进行一一突破！ 3.1、解决编辑器问题 编辑器这玩意儿，就不需要多说了吧。直接上网搜索就是，然后下载下来后进行解压、安装之类的步骤。如果看官不会此步骤，建议浏览文章→→Dreamweaver Cs6安装 ，按照文章来进行安装 软件。 3.2、解决p+css布局问题 前面说过，今天只讲一个简单的案例，所以我们只需要一个简单的布局即可。布局的话就以上面的分析图为例。在上代码前，艺灵建议看官根据上面的分析图进行自己写代码，标签随便用，但要注意核心内容。 3.2.1、html布局 立即学习 “ PHP免费学习笔记（深入） ”； 有了布局，我们还需要 对其进行美化。 3.2.2、css样式 立即学习 “ PHP免费学习笔记（深入） ”； 来张上面源码展示的效果图吧！配图： 好了，布局这一步也搞定了，接下来开始有点难度了哦！ 四、js/jq做什么？ 不知道看官有没有注意，此时艺灵已将 单独拿出来讲了，毕竟这个不是一两行代码就能说得清的。我们还是来进行进一步分析下这个案例的效果吧！ 默认情况下，我们从上向下浏览好友动态，此时如同浏览正常网页；当快浏览完好友动态时，普通的网页是见到了底部，已经没有内容了，而腾讯的呢？他是自动又进行了加载，然后将数据插入到页面中，由于页面有了新的数据，所以此时浏览器滚动条距离底部还有很长一段距离，此时我们仿佛又回到了之前的状态，继续下拉浏览。当再次快要拉到底的时候，数据又进行加载并填充，然后又是继续浏览，如此反复...... 那么问题来了！ 1、如何知道用户快要浏览完内容呢？ 2、快浏览完时怎么去触发自动加载事件呢？ 既然有问题，那我们就得去解决问题。 不知道看官有没有注意刚才艺灵的描述，描述中有一个关键点 滚动条 ！ 那滚动条可干嘛呢？在我们这个案例中起什么作用呢？ 我们可以计算滚动条距离页面顶部的距离呀！ 计算这个距离有什么用呢？ 单独这个距离是没什么用，但别忘记了， 源码中还有一个 的标签！有没有发现上面的配图中并没有看到这个 ？ 咦！对啊，我怎么没有看到呢？去哪儿了？ 没有看到就对了，要是看到了，那就起不到作用了！ 之所以看到不到，是因为他在下面，被默认内容撑下去了。前面说了，浏览器滚动后可以得出一个滚动的高度，此时这个 距离顶部也是有一个高度的。当 快要显示的时候也就表示着快到拉到底了，配图： 此时我们就需要去触发加载了。 至此，我们刚提的两个问题就已经解决了，现在来写 代码吧！ 4.1、jq判断是否快到拉到底部 4.1.1、jq判代码 立即学习 “ PHP免费学习笔记（深入） ”； 此时我们去刷新页面，尝试向下拉动滚动条，快到底部时可以看到有弹窗提示。配图： 既然可以看到弹窗，表示我们的js代码成功了。接下来就是添加数据了。 4.2、触发点击事件添加数据 今天我们不讲 ajax 和 php ，明天再讲。今天只讲一个简单的点击加载数据操作。 由于我们今天没有数据，那就用一个盒子充当数据吧。 现在数据有了，但又有新的问题！ 1、点击事件怎么写？ 2、新的“数据”如何插入到页面中？ 4.2.1、点击事件 立即学习 “ PHP免费学习笔记（深入） ”； 此时我们手动去点击“点击加载更多内容......”这个按钮会看到有弹窗提示，配图： 4.2.2、插入内容 我们将上面的代码放到 中，替换掉原 弹框。再次点击时配图： 好了，差不多了。但是有一个问题：现在是点击才去进行加载，如何做到让他自动加载呢？？？ 这个作为今天的作业吧。 友情提示： 建议回头看 的代码片段。明日会继续进行后续讲解。 上次留下的问题不知道看官们有没有解决，没有解决的看下面的答案吧。 4.4、自动加载思路 我们在 中已经可以判断出 滚动条是否快到拉到底部 ，在 中我们又做出了 点击事件和加载“数据” 的步骤，所以我们这个自动加载可以将 和 结合起来。也就是说： 当滚动条快拉到底部时，我们让它去触发点击事件。 4.5、自动加载源码 4.5.1、完整jquery代码 立即学习 “ PHP免费学习笔记（深入） ”； 案例欣赏： 怎么样，是不是有点感觉了？ 接下来我们继续向下进行。 五、使用ajax发送请求 5.1、ajax格式 这个ajax的话呢，其实也不是多难，我们还是要先写好框架，然后再进行替换上面的代码。 5.1.1、ajax发送请求代码 立即学习 “ PHP免费学习笔记（深入） ”； 上面的代码怎么用呢？ 其实我们只要稍微思考下就行了。上面是代码，代码需要去执行啊！既然是需要去执行，那什么时候才去执行呢？？？ 当然是 点击 的时候去触发 ajax 了！好，我们继续来完善我们的代码。 5.2、ajax和jquery进行结合 5.2.1、ajax和jquery进行结合 立即学习 “ PHP免费学习笔记（深入） ”； 上面的代码中还有一些参数没有修改，因为这些参数要根据我们接下来的php进行修改。 六、php文件 6.1、分析php文件做什么事情 这个 php 文件里面有什么内容呢？具体内容还是要根据我们具体的案例来进行写代码。 举个例子：我们要做一个下拉时自动加载文章的效果。既然是加载文章，所以我们需要知道以下这些数据： 文章标题、文章简介、文章缩略图、发表日期、来源网站、作者、阅读量、评论数 等等。这些数据都需要通过这个 文件传递给我们上面的 。 6.2、sql语句查询信息 既然是传递数据，我们就需要去查询数据。不可能说直接把信息写死，这是不现实的！所以，这个 文件中还要有我们的 sql 语句。 哦卖糕的！前面的 还能稍微理解，后面的 完全不能理解，更不用提什么 和 查询了。想必部分看官会有这样的感想。 那怎么办呢？按照文章思路去学习对应的知识呗！如果只知道 代码而不知道原理及流程的话，换个地方又不会使用了。 七、最后 下拉时自动加载 的原理大致就是这样，对于源码，基本上是大同小异。下次艺灵将会调用几个网站管理系统中的数据来做成插件，到时需要的看官可根据自己的需求进行下载对应的插件。 本篇文章讲解了$.ajax+php实战教程之下拉时自动加载更多文章原理，更多相关内容请关注php中文网。 相关推荐： 关于zx-image-view图片预览插件，支持旋转、缩放、移动的相关操作 讲解微信小程序开发基础篇之第一课 关于selenium用法的详解