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

来源：动视网责编：小采时间：2020-11-27 19:46:42

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

基于ajax实现点击加载更多无刷新载入到本页:本文给大家介绍通过ajax技术实现无刷新加载更多载入到本页，感兴趣的朋友一起学习吧先给大家展示效果图：效果演示本例是分页的另外一种显示方式,并不是隐藏未显示的内容数据库结构与《ajax 翻页》是一样的JavaScript 代码<script type="

推荐度：

点击下载本文 文档为doc格式

导读基于ajax实现点击加载更多无刷新载入到本页:本文给大家介绍通过ajax技术实现无刷新加载更多载入到本页，感兴趣的朋友一起学习吧先给大家展示效果图：效果演示本例是分页的另外一种显示方式,并不是隐藏未显示的内容数据库结构与《ajax 翻页》是一样的JavaScript 代码<script type="

本文给大家介绍通过ajax技术实现无刷新加载更多载入到本页，感兴趣的朋友一起学习吧

先给大家展示效果图：

效果演示

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

数据库结构与《ajax 翻页》是一样的

JavaScript 代码

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('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>'; 
?>

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

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

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

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