php+ajax實現(xiàn)無刷新動態(tài)加載數(shù)據(jù)技術(shù)
我們?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)輸出,代碼如下:
<?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['userid']];?></div> </div> <div class="content"><?php echo $row['content'];?></div> </div> <?php } ?> </div> <div class="nodata"></div>
注:本例使用的數(shù)據(jù)來源于本站文章:,文中有創(chuàng)建數(shù)據(jù)表的介紹。
jQuery
1、首先,我們要獲取瀏覽器可視區(qū)域頁面的高度:
2、然后,當滾動頁面的時候需要做的事情是:計算頁面總高度(當滾動底部時,頁面新加載數(shù)據(jù),所以頁面總高度是動態(tài)變化的),計算滾動條位置(滾動條位置也是隨著加載頁面的高度動態(tài)變化的),然后構(gòu)造一個公式,計算相對比例。
$(window).scroll(function () { var pageH = $(document.body).height(); //頁面總高度 var scrollT = $(window).scrollTop(); //滾動條top var aa = (pageH-winH-scrollT)/winH; });
3、當滾動條接近頁底時,觸發(fā)ajax加載,在本例中我們使用jQuery的getJSON方法,向服務(wù)端result.php發(fā)送請求,請求的參數(shù)為page,即頁數(shù)。
if(aa<0.02){ $.getJSON("result.php",{page:i},function(json){ ..... }); }
4、如果請求響應(yīng)成功返回JSON數(shù)據(jù),則解析JSON數(shù)據(jù),并將數(shù)據(jù)追加到頁面DIV#container后,如果沒有JSON數(shù)據(jù)返回,則說明數(shù)據(jù)全部顯示完畢
if(json){ var str = ""; $.each(json,function(index,array){ //遍歷 var str = "..."; //獲取的JSON數(shù)據(jù) $("#container").append(str); //追加 }); i++; //頁數(shù)+1 }else{ $(".nodata").show().html("別滾動了,已經(jīng)到底了。。。"); return false; }
完整的jQuery代碼如下:
$(function(){ var winH = $(window).height(); //頁面可視區(qū)域高度 var i = 1; //設(shè)置當前頁數(shù) $(window).scroll(function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滾動條top var aa = (pageH-winH-scrollT)/winH; if(aa<0.02){ $.getJSON("result.php",{page:i},function(json){ if(json){ var str = ""; $.each(json,function(index,array){ var str = "<div class=\"single_item\"><div class=\"element_head\">"; var str += "<div class=\"date\">"+array['date']+"</div>"; var str += "<div class=\"author\">"+array['author']+"</div>"; var str += "</div><div class=\"content\">"+array['content']+"</div></div>"; $("#container").append(str); }); i++; }else{ $(".nodata").show().html("別滾動了,已經(jīng)到底了。。。"); return false; } }); } }); });
result.php
當滾動到頁面底部時,前端Ajax請求到result.php,該后臺程序?qū)⒏鶕?jù)請求的數(shù)據(jù)頁數(shù):page,查詢數(shù)據(jù)表中對應(yīng)的記錄,并將記錄集以json的格式輸出返回給前端處理。
require_once('connect.php'); //連接數(shù)據(jù)庫 $user = array('demo1','demo2','demo3','demo3','demo4'); $page = intval($_GET['page']); //獲取請求的頁數(shù) $start = $page*15; $query=mysql_query("select * from say order by id desc limit $start,15"); while ($row=mysql_fetch_array($query)) { $arr[] = array( 'content'=>$row['content'], 'author'=>$user[$row['userid']], 'date'=>date('m-d H:i',$row['addtime']) ); } echo json_encode($arr); //轉(zhuǎn)換為json數(shù)據(jù)輸出
好了,本文的介紹到此結(jié)束,快去看看效果吧。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- ajax php 實現(xiàn)寫入數(shù)據(jù)庫
- php從數(shù)據(jù)庫中獲取數(shù)據(jù)用ajax傳送到前臺的方法
- php+ajax 實現(xiàn)輸入讀取數(shù)據(jù)庫顯示匹配信息
- Ajax PHP 邊學(xué)邊練 之三 數(shù)據(jù)庫
- PHP jQuery+Ajax結(jié)合寫批量刪除功能
- php+ajax實現(xiàn)圖片文件上傳功能實例
- php的ajax簡單實例
- php采用ajax數(shù)據(jù)提交post與post常見方法總結(jié)
- ThinkPHP中使用ajax接收json數(shù)據(jù)的方法
- php+ajax+jquery實現(xiàn)點擊加載更多內(nèi)容
- PHP+jQuery+Ajax實現(xiàn)用戶登錄與退出
- php + ajax 實現(xiàn)的寫入數(shù)據(jù)庫操作簡單示例
相關(guān)文章
php實現(xiàn)統(tǒng)計IP數(shù)及在線人數(shù)的示例代碼
這篇文章主要介紹了php實現(xiàn)統(tǒng)計IP數(shù)及在線人數(shù)的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07Laravel框架學(xué)習(xí)筆記(二)項目實戰(zhàn)之模型(Models)
上一篇已經(jīng)介紹開發(fā)環(huán)境的搭建,這篇將從項目實戰(zhàn)開發(fā),一步一步了解laravel框架。首先我們來了解下laravel框架的模型 (Models)2014-10-10php教程之魔術(shù)方法的使用示例(php魔術(shù)函數(shù))
這篇文章主要介紹了php的魔術(shù)方法的使用示例(php魔術(shù)函數(shù)),需要的朋友可以參考下2014-02-02laravel5環(huán)境隱藏index.php后綴(apache)的方法
今天小編就為大家分享一篇laravel5環(huán)境隱藏index.php后綴(apache)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10