一款简单实用的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. IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例

    这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...

  2. 查看Linux服务器CPU总核数

    下面介绍查看Linux服务器CPU总核数的方法. 通过/proc/cpuinfo可查看CPU个数及总核数. [root@kevin ~]# grep processor /proc/cpuinfo | ...

  3. Web前端基础(9):JavaScript(三)

    1. 常用内置对象 所谓内置对象就是ECMAScript提供出来的一些对象,我们知道对象都是有相应的属性和方法. 1.1 数组Array 1.1.1 数组的创建方式 字面量方式创建(推荐大家使用这种方 ...

  4. .Net Core MVC理解新管道处理模型、中间件

    .Net Core中间件官网:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore ...

  5. OpenCV:图像的开运算与闭运算

    导包: import numpy as np import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(image) ...

  6. Java日期处理组件joda-time

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/175 Java日期处理组件joda-time 平常在开发过 ...

  7. Django出错提示TemplateDoesNotExist at /

    Issue: 打开login URL的时候报错如下: Action: 在setting.py中修改DIRS,模板文件目录 TEMPLATES = [ { 'BACKEND': 'django.temp ...

  8. LogMiner Utility Release 8i - 11g (Doc ID 291686.1)

    LogMiner Utility Release 8i - 11g (Doc ID 291686.1) APPLIES TO: Oracle Database Exadata Cloud Machin ...

  9. [Linux] Nginx服务下统计网站的QPS

    单位时间的请求数就是QPS,那么在nginx服务的网站下,如果要统计QPS并且按从高到低排列,需要使用awk配合sort进行处理awk做的主要工作是把access每行日志按分隔符分开,然后循环每一行, ...

  10. 前端JSON请求转换Date问题

    目的:记录使用SpringMVC中前端JSON数据中的日期转换成Date数据类型时区产生的问题 记录下遇到过的问题 在使用SpringMVC框架中,使用@RequestBody注解将前端的json数据 ...