滑輪滾動到頁面底部ajax加載數(shù)據配合jsonp實現(xiàn)過程是怎樣的-創(chuàng)新互聯(lián)

這期內容當中小編將會給大家?guī)碛嘘P滑輪滾動到頁面底部ajax加載數(shù)據配合jsonp實現(xiàn)過程是怎樣的，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)自成立以來，一直致力于為企業(yè)提供從網站策劃、網站設計、成都做網站、網站建設、電子商務、網站推廣、網站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網的全面整合營銷服務。公司擁有豐富的網站建設和互聯(lián)網應用系統(tǒng)開發(fā)管理經驗、成熟的應用系統(tǒng)解決方案、優(yōu)秀的網站開發(fā)工程師團隊及專業(yè)的網站設計師團隊。

滾動下拉到頁面底部加載數(shù)據是很多瀑布流網站的做法，那來看看配合jsonp是如何實現(xiàn)的吧，小菜總結記錄之用，高手勿噴。

當然本例子采用的是jquery庫，后期會做成原生js。
本例的數(shù)據調用的是鋒利的jquery一書提供的一段json。

首先要先判斷頁面怎么樣才是滾動到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代碼: $(window).scrollTop()+$(window).height()>=$(document).height()；
再給window綁定scroll事件。所以整個頁面demo可以這樣做:

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{ padding: 10px;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).bind('scroll',function(){show()});
function show()
{
if($(window).scrollTop()+$(window).height()>=$(document).height())
{
ajaxRead();
}
}
function ajaxRead()
{
var html="";
$.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+='<div class="box">';
html+='<h2>'+item.title+'</h2>';
html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'
html+='<div>'+item.tags+'</div>';
html+='</div>';
});
$("#resText").append($(html));
},
complete:function(){console.log('mission acomplete.')}
});
}
})
</script>
</head>
<body>
往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉
<div id="resText" >
</div>
</body>
</html>

拉到底部就是實現(xiàn)異步數(shù)據加載了，當然了，實際項目還要加上如果沒數(shù)據了要怎么顯示，怎么操作。這些加判斷就行了。

上述就是小編為大家分享的滑輪滾動到頁面底部ajax加載數(shù)據配合jsonp實現(xiàn)過程是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網站欄目：滑輪滾動到頁面底部ajax加載數(shù)據配合jsonp實現(xiàn)過程是怎樣的-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article40/djideo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供Google、外貿網站建設、網站排名、網站建設、App設計、商城網站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容