無刷新功能我們用到很多很多的,下面我就來給各位介紹一個實例,就是實現(xiàn)php+ajax實現(xiàn)無刷新滾屏加載數(shù)據(jù),例子非常的簡單大家只要按流程來操作就可以了哦。
我們?yōu)g覽有些網(wǎng)頁的時候，當拉動瀏覽器的滾動條時到頁底時，頁面會繼續(xù)自動加載更多內(nèi)容供用戶瀏覽。這種技術(shù)我暫且稱它為滾屏加載技術(shù)。我們發(fā)現(xiàn)很多網(wǎng)站用到這種技術(shù)，必應(yīng)圖片搜索、新浪微博、QQ空間等將該技術(shù)應(yīng)用得淋漓盡致。
滾屏加載技術(shù)，就是使用Javascript監(jiān)視滾動條的位置，每次當滾動條到達瀏覽器窗口底部時，觸發(fā)一個Ajax請求后臺PHP程序，返回相應(yīng)的數(shù)據(jù)，并將返回的數(shù)據(jù)追加到頁面底部，從而實現(xiàn)了動態(tài)加載，其實就是一個典型的Ajax應(yīng)用。本文將使用jQuery，結(jié)合PHP，mysql以及JSON，為您講解如何應(yīng)用滾屏加載技術(shù)到您的項目中去。當然，閱讀本文的前提是您需要有jQuery和PHP相關(guān)基礎(chǔ)。
index.php
我們默認要顯示15條數(shù)據(jù)，因此，我們先從數(shù)據(jù)庫取開始的15條數(shù)據(jù)顯示在頁面。后面新加載的數(shù)據(jù)，我們也按每次15條的方式展示。
為了講解盡量簡單，我使用原生的PHP和mysql查詢語句。首先，需要連接數(shù)據(jù)庫，包含連接信息的connnect.php。這里我定義了幾個用戶id。
然后查詢數(shù)據(jù)表，獲得結(jié)果集，并循環(huán)輸出，代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php require_once('connect.php'); $user = array('demo1','demo2','demo3','demo3','demo4'); ?> <div id="container"> <?php $query=mysql_query("select * from say order by id desc limit 0,15"); while ($row=mysql_fetch_array($query)) { ?> <div class="single_item"> <div class="element_head"> <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div> <div class="author"><?php echo $user[$row[jQuery
1、首先，我們要獲取瀏覽器可視區(qū)域頁面的高度：
代碼如下:
var winH = $(window).height();
2、然后，當滾動頁面的時候需要做的事情是：計算頁面總高度(當滾動底部時，頁面新加載數(shù)據(jù)，所以頁面總高度是動態(tài)變化的)，計算滾動條位置(滾動條位置也是隨著加載頁面的高度動態(tài)變化的)，然后構(gòu)造一個公式，計算相對比例。
?
1 2 3 4 5 $(window).scroll(function () { var pageH = $(document.body).height(); //頁面總高度 var scrollT = $(window).scrollTop(); //滾動條top var aa = (pageH-winH-scrollT)/winH; });新聞熱點
疑難解答
圖片精選
