摘要：
　　继上一篇《$.ajax+php实战教程之下拉时自动加载更多文章原理分析》文章进行进一步讲解，完善之前的代码及引入ajax和php相关内容......

今天接着上次的文章 $.ajax+php实战教程之下拉时自动加载更多文章原理分析 来完成后面的操作。

上次留下的问题不知道看官们有没有解决，没有解决的看下面的答案吧。

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代码而不知道原理及流程的话，换个地方又不会使用了。

七、最后

下拉时自动加载的原理大致就是这样，对于源码，基本上是大同小异。下次艺灵将会调用几个网站管理系统中的数据来做成插件，到时需要的看官可根据自己的需求进行下载对应的插件。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-05-18/397.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。