先给大家展示效果图:
本例是分页的另外一种显示方式,并不是隐藏未显示的内容
数据库结构与《ajax 翻页》是一样的
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");
}
}
});
});
load More
fetch_pages.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 '
- ';
while($row = MysqL_fetch_array($results))
{
echo '
'.$row["id"].') '.$row["name"].' ';}
echo '
';?>
以上内容是小编给大家介绍的基于ajax实现点击加载更多无刷新载入到本页,希望大家喜欢。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。