首页 > web前端 > js教程 > 正文

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

亚连
发布: 2018-05-24 16:08:27
原创
3151 人浏览过

本文给大家介绍通过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; ?>; 
  $(&#39;#results&#39;).load("fetch_pages.php", {&#39;page&#39;: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 
    $(&#39;.animation_image&#39;).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(&#39;fetch_pages.php&#39;,{&#39;page&#39;: 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 
        $(&#39;.animation_image&#39;).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 
        $(&#39;.animation_image&#39;).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代码

<p id="results"></p> 
<p align="center"> 
<button class="load_more" id="load_more_button">load More</button> 
<p class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</p> 
</p>
登录后复制

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(&#39;HTTP/1.1 500 Invalid page number!&#39;); 
  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 &#39;<ul class="page_result">&#39;; 
while($row = mysql_fetch_array($results)) 
{ 
  echo &#39;<li id="item_&#39;.$row["id"].&#39;"><span class="page_name">&#39;.$row["id"].&#39;) &#39;.$row["name"].&#39;</span><span class="page_message">&#39;.$row["message"].&#39;</span></li>&#39;; 
} 
echo &#39;</ul>&#39;; 
?>
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法

Jquery Ajax请求文件下载操作失败的原因分析及解决办法

编写轻量ajax组件01-与webform平台上的各种实现方式比较

以上是基于ajax实现点击加载更多无刷新载入到本页的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板