关于做网站建设公司你应该知道的,中国镇江网,外贸推广免费网站,上海公司注册查询摘要#xff1a;继上一篇《$.ajaxphp实战教程之下拉时自动加载更多文章原理分析》文章进行进一步讲解#xff0c;完善之前的代码及引入ajax和php相关内容......上次留下的问题不知道看官们有没有解决#xff0c;没有解决的看下面的答案吧。4.4、自动加载思路我们在4.1中已经…摘要继上一篇《$.ajaxphp实战教程之下拉时自动加载更多文章原理分析》文章进行进一步讲解完善之前的代码及引入ajax和php相关内容......上次留下的问题不知道看官们有没有解决没有解决的看下面的答案吧。4.4、自动加载思路我们在4.1中已经可以判断出滚动条是否快到拉到底部在4.2中我们又做出了点击事件和加载“数据”的步骤所以我们这个自动加载可以将4.1和42结合起来。也就是说当滚动条快拉到底部时我们让它去触发点击事件。4.5、自动加载源码4.5.1、完整jquery代码$(window).scroll(function(){var t$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/var h$(this).height();/*获取当前窗口的高度*/var h1$(#ylsj-load).offset().top;/*获取按钮距离浏览器顶部的值*//*用按钮的值-滚动条的值与窗口高度进行比较如果小时则表示按钮进入可视区同时也表示滚动条即将到达底部*/if(h1-t/*这里将之前的弹窗改成点击事件*/$(#ylsj-load).click();}});var i0;$(#ylsj-load).click(function(){i;$(this).before(加载的数据外框架已加载i次);});案例欣赏怎么样是不是有点感觉了接下来我们继续向下进行。五、使用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进行结合var i0;/*定义一个变量等会用来控制多次触发*/$(window).scroll(function(){var t$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/var h$(this).height();/*获取当前窗口的高度*/var h1$(#ylsj-load).offset().top;/*获取按钮距离浏览器顶部的值*//*用按钮的值-滚动条的值与窗口高度进行比较如果小时则表示按钮进入可视区同时也表示滚动条即将到达底部*/if(h1-tif(i0){/*防止快速下拉时多次触发*/i1;/*改变i的值*//*这里将之前的弹窗改成点击事件*/$(#ylsj-load).click();}}});$(#ylsj-load).click(function(){/*将原来这里的内容替换成ajax动态获取数据*/$.ajax({type:/*类型post或get*/,url:要请求的php文件地址,data:{/*要传递的参数*/},dataType:/*数据类型html、json、xml等*/,success:function(data){/*成功时返回数据*/i0;/*然后恢复状态否则继续下拉时不能继续执行*/},error:function(jqXHR){/*失败时进行提示*/}});});上面的代码中还有一些参数没有修改因为这些参数要根据我们接下来的php进行修改。六、php文件6.1、分析php文件做什么事情这个php文件里面有什么内容呢具体内容还是要根据我们具体的案例来进行写代码。举个例子我们要做一个下拉时自动加载文章的效果。既然是加载文章所以我们需要知道以下这些数据文章标题、文章简介、文章缩略图、发表日期、来源网站、作者、阅读量、评论数等等。这些数据都需要通过这个php文件传递给我们上面的ajax。6.2、sql语句查询信息既然是传递数据我们就需要去查询数据。不可能说直接把信息写死这是不现实的所以这个php文件中还要有我们的sql语句。哦卖糕的前面的jquery还能稍微理解后面的ajax完全不能理解更不用提什么php和sql查询了。想必部分看官会有这样的感想。那怎么办呢按照文章思路去学习对应的知识呗如果只知道copy代码而不知道原理及流程的话换个地方又不会使用了。七、最后下拉时自动加载的原理大致就是这样对于源码基本上是大同小异。下次艺灵将会调用几个网站管理系统中的数据来做成插件到时需要的看官可根据自己的需求进行下载对应的插件。----------完----------转载声明若亲想转载本文到其它平台请务必保留本文出处本文链接http://www.yilingsj.com/jquery/2016-05-18/397.html若亲不想直保留地址含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载随便修改但请尊重艺灵的劳动成果谢谢理解。
