文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关ajax如何实现点击加载更多无刷新载入到本页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

先给大家展示效果图:

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

效果演示

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

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

关于“ajax如何实现点击加载更多无刷新载入到本页”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯