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

先给大家展示效果图:

14842157131.jpg?201591694058

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

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

ajax-loader.gif Loading...

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"].' '.$row["message"].'';

}

echo '

';

?>

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

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值