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