先給大家展示效果圖：
效果演示
本例是分頁的另外一種顯示方式,并不是隱藏未顯示的內(nèi)容
數(shù)據(jù)庫結(jié)構(gòu)與《ajax 翻頁》是一樣的
JavaScript 代碼
script type="text/javascript">
$(document).ready(function() {
var track_click = ; //track user click on "load more" button, righ now it is click
var total_pages = ?php echo $total_pages; ?>;
$('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load
$(".load_more").click(function (e) { //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click = total_pages) //make sure user clicks are still less than total pages
{
//post page number and load returned data into result element
$.post('fetch_pages.php',{'page': track_click}, function(data) {
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page to button element
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, );
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError); //alert any HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});
if(track_click >= total_pages-)
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}
});
});
/script>
XML/HTML代碼
div id="results">/div>
div align="center">
button class="load_more" id="load_more_button">load More/button>
div class="animation_image" style="display:none;">img src="ajax-loader.gif"> Loading.../div>
/div>
fetch_pages.php
php代碼
?php
include("conn.php");
$item_per_page = 3;
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page");
//output results from database
echo 'ul class="page_result">';
while($row = mysql_fetch_array($results))
{
echo 'li id="item_'.$row["id"].'">span class="page_name">'.$row["id"].') '.$row["name"].'/span>span class="page_message">'.$row["message"].'/span>/li>';
}
echo '/ul>';
?>
以上內(nèi)容是小編給大家介紹的基于ajax實(shí)現(xiàn)點(diǎn)擊加載更多無刷新載入到本頁，希望大家喜歡。
您可能感興趣的文章:- 如何使用AJAX實(shí)現(xiàn)按需加載【推薦】
- ajax異步加載圖片實(shí)例分析
- JQuery實(shí)現(xiàn)Ajax加載圖片的方法
- js ajax加載時(shí)的進(jìn)度條代碼
- javascript+ajax實(shí)現(xiàn)產(chǎn)品頁面加載信息
- jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多
- jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
- jQuery結(jié)合ajax實(shí)現(xiàn)動(dòng)態(tài)加載文本內(nèi)容
- Ajax加載外部頁面彈出層效果實(shí)現(xiàn)方法
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- php+ajax實(shí)現(xiàn)無刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
