您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在php中利用ajax實(shí)現(xiàn)一個(gè)無刷新動(dòng)態(tài)加載數(shù)據(jù)功能,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
代碼如下:
<?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ū)域頁(yè)面的高度:
復(fù)制代碼 代碼如下:
var winH = $(window).height();
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ì)比例。
$(window).scroll(function () { var pageH = $(document.body).height(); //頁(yè)面總高度 var scrollT = $(window).scrollTop(); //滾動(dòng)條top var aa = (pageH-winH-scrollT)/winH; });
3、當(dāng)滾動(dòng)條接近頁(yè)底時(shí),觸發(fā)ajax加載,在本例中我們使用jQuery的getJSON方法,向服務(wù)端result.php發(fā)送請(qǐng)求,請(qǐng)求的參數(shù)為page,即頁(yè)數(shù)。
if(aa<0.02){ $.getJSON("result.php",{page:i},function(json){ ..... }); }
4、如果請(qǐng)求響應(yīng)成功返回JSON數(shù)據(jù),則解析JSON數(shù)據(jù),并將數(shù)據(jù)追加到頁(yè)面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++; //頁(yè)數(shù)+1 }else{ $(".nodata").show().html("別滾動(dòng)了,已經(jīng)到底了。。。"); return false; }
完整的jQuery代碼如下:
$(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; } }); } }); });
result.php
當(dāng)滾動(dòng)到頁(yè)面底部時(shí),前端Ajax請(qǐng)求到result.php,該后臺(tái)程序?qū)⒏鶕?jù)請(qǐng)求的數(shù)據(jù)頁(yè)數(shù):page,查詢數(shù)據(jù)表中對(duì)應(yīng)的記錄,并將記錄集以json的格式輸出返回給前端處理。
require_once('connect.php'); //連接數(shù)據(jù)庫(kù) $user = array('demo1','demo2','demo3','demo3','demo4'); $page = intval($_GET['page']); //獲取請(qǐng)求的頁(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中利用ajax實(shí)現(xiàn)一個(gè)無刷新動(dòng)態(tài)加載數(shù)據(jù)功能,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。