先给大家展示效果图：

效果演示

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

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

Java脚本语言代码

脚本类型='text/javascript' $(文档)。ready(function(){ var track _ click=；//跟踪用户点击'加载更多'按钮，现在是点击var total_pages=？php echo $ total _ pages？$(“# results”).load('fetch_pages.php '，{'page':track_click}，function(){ track _ click；});//要加载的初始数据$('。load _ more’).点击（函数(e){//用户点击按钮$(这个).hide()；//单击$('时隐藏加载更多按钮。动画_图像')。show()；//如果(跟踪点击=总页数)则显示加载图像//确保用户的点击量仍然小于总页数{//将页码和返回的数据加载到结果元素$。post('fetch_pages.php '，{'page': track_click}，function(data) { $(').load _ more’).show()；//恢复加载更多按钮$(“# results”).追加（数据);//将从服务器//接收到的数据追加到按钮元素$(“html，body”).制作动画({ scroll top : $(' # load _ more _ button ').偏移量()。top}，)；//隐藏加载图像$('。动画_图像')。hide()；//接收到数据后隐藏加载图像track _ click//用户点击加载按钮上的增量})。fail(函数(xhr，ajaxOptions，抛出错误){ alert(抛出错误)；//提醒任何超文本传送协议错误$('。load _ more’).show()；//恢复加载更多按钮$('。动画_图像')。hide()；//收到数据后隐藏加载图像});如果(track _ click=total _ pages-){//到达页面末尾了吗？禁用加载按钮$('。load _ more’).attr('disabled '，' disabled ')；} } });});/scriptXML/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=' http : Ajax-loader。gif '正在加载./div /div fetch_pages.php

服务器端编程语言(专业超文本预处理器的缩写)代码

？PHP include(' conn . PHP ')；$ item _ per _ page=3；//净化帖子值$ page _ NUMBER=FILTER _ var($ _ POST[' page ']，FILTER_SANITIZE_NUMBER_INT，FILTER _ FLAG _ STRIP _ HIGH)；//如果页码无效，抛出超文本传送协议错误如果(!is _ numeric($ page _ number)){ 0标头(' HTTP/1.1 500无效页码!');exit()；}//获取记录的当前起始点$ position=($ page _ number * $ item _ per _ page)；//将我们的结果限制在指定的范围内$ results=MySQL _ query(‘SELECT * FROM content ORDER BY id desc LIMIT $ position，$ item _ per _ page’)；//从数据库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']./spanspan class='page_message ' ' .$row['message']./span/Li '；} echo '/ul '；以上内容是小编给大家介绍的基于创建交互式、快速动态网页应用的网页开发技术实现点击加载更多无刷新载入到本页，希望大家喜欢。