滑轮滚动到页面底部ajax加载数据配合json实现

发布时间：2020-12-16 01:59:49 所属栏目：百科来源：网络整理

导读：滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。当然本例子采用的是jquery库，后期会做成原生js。本例的数据调用的是锋利的jquery一书提供的一段json。首先要先判断页面怎么样才是滚

滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。

当然本例子采用的是jquery库，后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。
首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height()；
再给window绑定scroll事件。所以整个页面demo可以这样做:

拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns=" http://www.w3.org/1999/xhtml">
<head>
<title></title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
p{margin:5px;}
.box{padding:10px;}
</style>

<scriptsrc=" http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$(window).bind('scroll',function(){show()});
functionshow()
{
if($(window).scrollTop()+$(window).height()>=$(document).height())
{
ajaxRead();
}
}
functionajaxRead()
{
varhtml="";
$.ajax({
type:'get',
dataType:'jsonp',
url:' http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',beforeSend:function(){console.log('loading...')},success:function(data){ $.each(data.items,function(i,item){ html+='<divclass="box">'; html+='<h1>'+item.title+'</h1>'; html+='<ahreft="'+item.link+'"><imgsrc="'+item.media.m+'"/></a>' html+='<div>'+item.tags+'</div>'; html+='</div>'; }); $("#resText").append($(html)); },complete:function(){console.log('missionacomplete.')} }); } }) </script> </head> <body> 往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉 <divid="resText"> </div> </body> </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!