一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数据,并将数据追加到列表页。其实也是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>
$(function(){
$('#more').more({'address': '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.xxx.com/".$row['id'].".html' target='_blank'>".$row['title']."</a>",
'author' => $row['id'],
'date' => date('m-d H:i', $row['addtime'])
);
}
echo json_encode($sayList);

本文转自:https://www.sucaihuo.com/php/380.html 转载请注明出处!

PHP+Ajax点击加载更多列表数据实例的更多相关文章

  1. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  3. PHP+Ajax点击加载更多内容

    css样式: <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px soli ...

  4. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  5. Jquery点击加载更多

    一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  6. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  7. Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多

    一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...

  8. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  9. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

随机推荐

  1. 【docker构建】基于docker构建wordpress博客网站平台

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. WordPre ...

  2. Linux平台安装python的psutil包

    在Linux平台下,pip install psutil 安装python psutil包,出现下面的错误: psutil/_psutil_common.c:9:20: fatal error: Py ...

  3. go语言之数组

    1.go语言的数组和python的列表不一样,python的列表没有限定类型,而go的数组限定的类型,理由是这样的,请看下面的图 go语言的数组会数组中第一个值的内存地址,在我们上面的例子中,数组中的 ...

  4. .Netcore Swagger - 解决外部库导致的“Actions require an explicit HttpMethod binding for Swagger 2.0”

    现象: 项目中导入Ocelot后,swagger页面无法正常显示,查看异常发现 Ocelot.Raft.RaftController 中的 Action 配置不完全,swagger扫描时不能正确生成 ...

  5. Python自动发送邮件--smtplib模块

    import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText f ...

  6. Java操作数据库——使用JDBC连接数据库

    Java操作数据库——使用JDBC连接数据库 摘要:本文主要学习了如何使用JDBC连接数据库. 背景 数据持久化 数据持久化就是把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应 ...

  7. Docker 镜像与容器

    镜像和容器的关系   容器提交    commint 作用:       根据容器生成一个新的镜像        命令格式:       docker commit [OPTIONS] CONTAIN ...

  8. C# 利用itextsharp、Spire配合使用为pdf文档每页添加水印

    下载类库: 直接下载 引入类库 功能实现 using iTextSharp.text.pdf; using Spire.Pdf; using Spire.Pdf.Graphics; using Sys ...

  9. Eclipse 的快捷键

    1. 代码折叠的快捷键,默认是: Ctrl+Shift+Numpad_Divede(小键盘的/号) Ctrl+Shift+Numpad_Multiply(小键盘的*号) 2.删除一行:Ctrl+D 3 ...

  10. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...