PHP+Ajax点击加载更多内容

PHP+Ajax点击加载更多内容

点击加载更多实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数据,并将数据追加到列表页。其实也是Ajax分页效果。

淘建站为您提供更多_分页_加载_滚动,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 286 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:PHP功能模块 > Ajax 难易程度:中级

HTML

<div id="more"> 
     <div class="single_item"> 
           <div class="element_head"> 
               <div class="date"></div> 
               <div class="author"></div> 
            </div> 
            <div class="content"></div> 
     </div> 
     <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div>

引入jQuery插件和jquery.more.js加载更多插件

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.more.js"></script>

jQuery

$(function(){ 
    $('#more').more({'address': 'data.php'}) 
});

data.php

data.php接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。

require_once('connect.php');

$last = $_POST['last'];
$amount = $_POST['amount'];

$query = mysql_query("select * from article order by id desc limit $last,$amount");
while ($row = mysql_fetch_array($query)) {
    $sayList[] = array(
        'title' => "<a href='http://www.sucaiq.com/js/".$row['id'].".html' target='_blank'>".$row['title']."</a>",
        'author' => $row['id'],
        'date' => date('m-d H:i', $row['addtime'])
    );
}
echo json_encode($sayList);

jquery.more.js相关API

参数 描述 默认值
amount 每次显示记录数 10
address 请求后台的地址 -
format 数据传输格式 json
template html记录DIV的class属性 .single_item -
trigger 触发加载更多记录的class属性 .get_more -
scroll 是否支持滚动触发加载 false
offset 滚动触发加载时的偏移量 100

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/380.html
PHP+Ajax点击加载更多内容 希望对你有帮助,感谢您的支持!
  • jquery美女无限加载瀑布流效果

    jquery美女无限加载瀑布流效果

  • html5手机瀑布流图片加载效果

    html5手机瀑布流图片加载效果

  • html5 css3打造自适应屏幕自动加载瀑布流

    html5 css3打造自适应屏幕自动加载瀑布流

  • jquery带分享功能的无限滚动瀑布流图片布局展示含php源码

    jquery带分享功能的无限滚动瀑布流图片布局展示含php源码

  • jquery图片自滚动瀑布流效果

    jquery图片自滚动瀑布流效果

  • jquery仿堆糖网瀑布流布局单排图片自动滚动

    jquery仿堆糖网瀑布流布局单排图片自动滚动

  • jquery Masonry 方砖石布局插件制作无限滚动页面

    jquery Masonry 方砖石布局插件制作无限滚动页面

  • win8 Metro风格界面的html5瀑布流布局无限加载代码

    win8 Metro风格界面的html5瀑布流布局无限加载代码

  • 响应式jquery瀑布流结合图片延迟加载特效

    响应式jquery瀑布流结合图片延迟加载特效

  • 手机导航列表页面瀑布流图片无限加载代码

    手机导航列表页面瀑布流图片无限加载代码

  • 简单的jquery图片列表瀑布流布局代码没有无限加载功能

    简单的jquery图片列表瀑布流布局代码没有无限加载功能

  • jquery简单的瀑布流布局点击无限加载效果代码

    jquery简单的瀑布流布局点击无限加载效果代码

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2