• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于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" 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>'; 
    ?> 

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

    您可能感兴趣的文章:
    • 如何使用AJAX实现按需加载【推荐】
    • ajax异步加载图片实例分析
    • JQuery实现Ajax加载图片的方法
    • js ajax加载时的进度条代码
    • javascript+ajax实现产品页面加载信息
    • jQuery+AJAX实现无刷新下拉加载更多
    • jQuery结合AJAX之在页面滚动时从服务器加载数据
    • jQuery结合ajax实现动态加载文本内容
    • Ajax加载外部页面弹出层效果实现方法
    • php+ajax+jquery实现点击加载更多内容
    • php+ajax实现无刷新动态加载数据技术
    • jquery ajax局部加载方法详解(实现代码)
    上一篇:有关Ajax跨域问题的两种解决方法
    下一篇:如何解决ajax在google chrome浏览器上失效
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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