滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:52:26

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討:滾動(dòng)下拉到頁(yè)面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法，那來看看配合jsonp是如何實(shí)現(xiàn)的吧，小菜總結(jié)記錄之用，高手勿噴。當(dāng)然本例子采用的是jquery庫(kù)，后期會(huì)做成原生js。本例的數(shù)據(jù)調(diào)用的是鋒利的jquery一書提供的一段json。首先要先判斷頁(yè)面怎么樣才是滾動(dòng)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討:滾動(dòng)下拉到頁(yè)面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法，那來看看配合jsonp是如何實(shí)現(xiàn)的吧，小菜總結(jié)記錄之用，高手勿噴。當(dāng)然本例子采用的是jquery庫(kù)，后期會(huì)做成原生js。本例的數(shù)據(jù)調(diào)用的是鋒利的jquery一書提供的一段json。首先要先判斷頁(yè)面怎么樣才是滾動(dòng)

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

當(dāng)然本例子采用的是jquery庫(kù)，后期會(huì)做成原生js。
本例的數(shù)據(jù)調(diào)用的是鋒利的jquery一書提供的一段json。

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/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> 
<!-- 引入jQuery --> 
<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+='<h1>'+item.title+'</h1>'; 
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> 
<p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p> 
<div id="resText" > 
</div> 
</body> 
</html> 
 
拉到底部就是實(shí)現(xiàn)異步數(shù)據(jù)加載了，當(dāng)然了，實(shí)際項(xiàng)目還要加上如果沒數(shù)據(jù)了要怎么顯示，怎么操作。這些加判斷就行了。
  
  




聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：實(shí)現(xiàn) 滾動(dòng) 加載數(shù)據(jù)

熱門焦點(diǎn)

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討

最新推薦

猜你喜歡

熱門推薦