《PHP應用：php+ajax實現無刷新動態加載數據技術》要點：
本文介紹了PHP應用：php+ajax實現無刷新動態加載數據技術，希望對您有用。如果有疑問，可以聯系我們。
PHP實戰我們瀏覽有些網頁的時候,當拉動瀏覽器的滾動條時到頁底時,頁面會繼續自動加載更多內容供用戶瀏覽.這種技術我暫且稱它為滾屏加載技術.我們發現很多網站用到這種技術,必應圖片搜索、新浪微博、QQ空間等將該技術應用得淋漓盡致.
PHP實戰滾屏加載技術,就是使用Javascript監視滾動條的位置,每次當滾動條到達瀏覽器窗口底部時,觸發一個Ajax哀求后臺PHP程序,返回相應的數據,并將返回的數據追加到頁面底部,從而實現了動態加載,其實就是一個典型的Ajax應用.本文將使用jQuery,結合PHP,mysql以及JSON,為您講解如何應用滾屏加載技術到您的項目中去.當然,閱讀本文的前提是您需要有jQuery和PHP相關基礎.
PHP實戰index.php
PHP實戰我們默認要顯示15條數據,因此,我們先從數據庫取開始的15條數據顯示在頁面.后面新加載的數據,我們也按每次15條的方式展示.
PHP實戰為了講解盡量簡單,我使用原生的PHP和mysql查詢語句.首先,需要連接數據庫,包括連接信息的connnect.php.這里我定義了幾個用戶id.
PHP實戰然后查詢數據表,獲得結果集,并循環輸出,代碼如下：
PHP實戰
<?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>
PHP實戰注：本例使用的數據來源于本站文章：,文中有創建數據表的介紹.
PHP實戰jQuery
PHP實戰1、首先,我們要獲取瀏覽器可視區域頁面的高度：
PHP實戰2、然后,當滾動頁面的時候必要做的事情是：計算頁面總高度(當滾動底部時,頁面新加載數據,所以頁面總高度是動態變化的),計算滾動條位置(滾動條位置也是隨著加載頁面的高度動態變化的),然后構造一個公式,計算相對比例.
PHP實戰
$(window).scroll(function () {
var pageH = $(document.body).height(); //頁面總高度
var scrollT = $(window).scrollTop(); //滾動條top
var aa = (pageH-winH-scrollT)/winH;
});
PHP實戰3、當滾動條接近頁底時,觸發ajax加載,在本例中我們使用jQuery的getJSON方法,向服務端result.php發送哀求,哀求的參數為page,即頁數.
PHP實戰
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
.....
});
}
PHP實戰4、如果哀求響應成功返回JSON數據,則解析JSON數據,并將數據追加到頁面DIV#container后,如果沒有JSON數據返回,則說明數據全部顯示完畢
PHP實戰
if(json){
var str = "";
$.each(json,function(index,array){ //遍歷
var str = "..."; //獲取的JSON數據
$("#container").append(str); //追加
});
i++; //頁數+1
}else{
$(".nodata").show().html("別滾動了,已經到底了...");
return false;
}
PHP實戰完整的jQuery代碼如下：
PHP實戰
$(function(){
var winH = $(window).height(); //頁面可視區域高度
var i = 1; //設置當前頁數
$(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("別滾動了,已經到底了...");
return false;
}
});
}
});
});
PHP實戰result.php
PHP實戰當滾動到頁面底部時,前端Ajax哀求到result.php,該后臺程序將根據哀求的數據頁數：page,查詢數據表中對應的記錄,并將記錄集以json的格式輸出返回給前端處理.
PHP實戰
require_once('connect.php'); //連接數據庫
$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //獲取哀求的頁數
$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); //轉換為json數據輸出
PHP實戰好了,本文的介紹到此結束,快去看看效果吧.
PHP實戰以上所述便是本文的全部內容了,希望大家能夠喜歡.
歡迎參與《PHP應用：php+ajax實現無刷新動態加載數據技術》討論，分享您的想法，維易PHP學院為您提供專業教程。
