ajax php加载更多,AJAX_基于ajax实现点击加载更多无刷新载入到本页，先给大家展示效果图： 效果 - phpStudy...

基于ajax实现点击加载更多无刷新载入到本页

先给大家展示效果图：

效果演示

本例是分页的另外一种显示方式,并不是隐藏未显示的内容

数据库结构与《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");

}

}

});

});

XML/HTML代码

load More

Loading...

fetch_pages.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 '

• ';

while($row = mysql_fetch_array($results))

{

echo '

'.$row["id"].') '.$row["name"].' '.$row["message"].'';

}

echo '

';

?>

以上内容是小编给大家介绍的基于ajax实现点击加载更多无刷新载入到本页，希望大家喜欢。相关阅读:

DIV+CSS实现仿DreamWeaver界面图形菜单效果代码

Android 使用Vitamio打造自己的万能播放器(1)——准备

jquery实现的下拉和收缩效果示例

Android中OptionMenu用法实例

基于.NET中:自动将请求参数绑定到ASPX、ASHX和MVC的方法(菜鸟必看)

font-weight 属性设置文本的粗细介绍

ASP.NET GridView控件在列上格式化时间及DataFormatString使用

用于引导Win8系统GPT分区结构磁盘中的各分区的作用

Android实现返回键功能

jQuery动态添加

详解C++设计模式编程中对访问者模式的运用

在ASP.NET 2.0中操作数据之三十三：基于DataList和Repeater使用DropDownList过滤的主/从报表

java实现快速排序的方法

java微信开发API第三步 微信获取以及保存接口调用凭证