html代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
     <script src='__PUBLIC__/jquery-3.0.0.min.js'></script>
 </head>
 <body>
     <div id="list">
        <ul></ul>
    </div>
    <div id="pagecount"></div>
 </body>
 </html>
 <script>
     var curPage = 1; //当前页码
    var total,pageSize,totalPage; //总记录数，每页显示数，总页数
    //获取数据
    function getData(page){  
        $.ajax({
            type: 'POST',
            url: "{:U('Index/ajaxs')}",
            data: {'pageNum':page-1},
            dataType:'json',
            beforeSend:function(){
                $("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画
            },
            success:function(json){
                $("#list ul").empty();//清空数据区
                total = json.total; //总记录数
                pageSize = json.pageSize; //每页显示条数
                curPage = page; //当前页
                totalPage = json.totalPage; //总页数
                var li = "";
                var list = json.list;
                $.each(list,function(index,array){ //遍历json数据列
                    li += "<li><a href='#'>"+array['id']+"</a></li>";
                });
                $("#list ul").append(li);
            },
            complete:function(){ //生成分页条
                getPageBar();
                fun();
            },
            error:function(){
                alert("数据加载失败");
            }
        });
    }
    //获取分页条
    function getPageBar(){
        //页码大于最大页数
        if(curPage>totalPage) curPage=totalPage;
        //页码小于1
        if(curPage<1) curPage=1;
        pageStr = "<span>共"+total+"条</span><span>"+curPage
        +"/"+totalPage+"</span>";
         
        //如果是第一页
        if(curPage==1){
            pageStr += "<span>首页</span><span>上一页</span>";
        }else{
            pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
        }
         
        //如果是最后页
        if(curPage>=totalPage){
            pageStr += "<span>下一页</span><span>尾页</span>";
        }else{
            pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
        }
        $("#pagecount").html(pageStr);
    }
    
    $(function(){
        getData(1);
    });
    function fun(){
        $("#pagecount span a").on('click',function(){
            var rel = $(this).attr("rel");
            alert(rel)
            if(rel){
                getData(rel);
            }
        });  
    }
 </script>

PHP代码：

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
        echo 'ddd';
        $this->display();

exit;
        $result = mysql_query("select id from food");
        $total = mysql_num_rows($result);//总记录数
        $pageSize = 6; //每页显示数
        $totalPage = ceil($total/$pageSize); //总页数
        
        $startPage = $page*$pageSize; //开始记录
        //构造数组
        $arr['total'] = $total;
        $arr['pageSize'] = $pageSize;
        $arr['totalPage'] = $totalPage;
        $query = mysql_query("select id,title,pic from food order by id asc limit  
        $startPage,$pageSize"); //查询分页数据
        while($row=mysql_fetch_array($query)){
             $arr['list'][] = array(
                 'id' => $row['id'],
                'title' => $row['title'],
                'pic' => $row['pic'],
             );
        }
        echo json_encode($arr); //输出JSON数据
    }
    public function ajaxs(){
        $page = intval($_POST['pageNum']); //当前页
         $statistics=M('SearchStatistics');
         $total=$statistics->count();//总记录数
         $pageSize = 6; //每页显示数
         $totalPage = ceil($total/$pageSize); //总页数
         $startPage = $page*$pageSize; //开始记录
         
         //构造数组
        $arr['total'] = $total;
        $arr['pageSize'] = $pageSize;
        $arr['totalPage'] = $totalPage;
        $data=$statistics->limit("$startPage,$pageSize")->select();
        // dump($data);
        $arr['list'] = $data;
        echo json_encode($arr); //输出JSON数据
    }
}

ajax异步请求分页显示的更多相关文章

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  3. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  4. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  5. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  6. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  7. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  8. MVC&WebForm对照学习：ajax异步请求

    写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...

  9. art.dialog 与 ajax 异步请求

    上周写了一些代码,涉及到jquery异步请求,这里归纳总结下,希望对刚接触编程的同学有帮助. 主要习惯使用 art.dialog 框架,非常好用,在异步请求上,它提供了很多简便的方法. 加载使用art ...

随机推荐

  1. <转>程序员的心理疾病

    注:本文转自大神王垠的博客 原文出处 http://www.yinwang.org/blog-cn/2014/02/09/programmer-mental/ 说实话,虽然似乎为之奋斗了十多年,在真正 ...

  2. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（一）—— 手把手教你创建第一个三层架构+mvc的asp.net项目

    下面开启项目 1. 打开vs2010-文件-新建项目 2. 先创建一个空的解决方案: 选择其他项目类型-visual studio 解决方案-空白解决方案(默认.NET Framework 4),项目 ...

  3. tony_CENTOS启动方式设置

    方法: 在etc文件夹下面有个初始加载文件是用来启动系统的,系统在启动的时候先去env中找到shell的必要配置,然后把shell启动起来,那么再然后就要启动整个系统了,到底是启动图形界面呢,还是字符 ...

  4. Echart - 最好最强大效果最丰富的可视化图表插件

    # 官网http://echarts.baidu.com/ # demohttp://echarts.baidu.com/gallery/index.html Echart npm install e ...

  5. Atitit.软件命名空间  包的命名统计 及命名表（2000个名称） 方案java package

    Atitit.软件命名空间  包的命名统计 及命名表(2000个名称) 方案java package 1. 统计的lib jar 列表1 2. Code3 3. 常用包名按找字母排序(2000个)4 ...

  6. I2S与pcm的区别

    I2S仅仅是PCM的一个分支,接口定义都是一样的, I2S的采样频率一般为44.1KHZ和48KHZ做,PCM采样频率一般为8K,16K.有四组信号: 位时钟信号,同步信号,数据输入,数据输出. I2 ...

  7. 单页应用seo收录神器 -- seo-mask

    前言 看到标题的人肯定会问,seo-mask是什么,为什么可以解决单页应用seo无法被收录的难题呢? 简单来讲seo-mask做的就是为已经发布线上运营的的单页应用项目建立另一个简单的利于seo的镜像 ...

  8. JIRA /mnt/server/atlassian-jira-6.3.6-standalone/bin/start-jira.sh

    JIRA 敏捷开发平台部署记录   分类: 敏捷开发   1.1 jira说明 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪. ...

  9. eclipse启动不起来，eclipse.ini配置问题（支持大内存64bit问题）

    Eclipse 启动不起来异常:JVM terminated. Exit code=-1 Eclipse 启动不起来,出现以下错误: JVM terminated. Exit code=-1-Xms4 ...

  10. jQuery 数据操作函数

    函数 描述 .clearQueue() 从队列中删除所有未运行的项目. .data() 存储与匹配元素相关的任意数据. jQuery.data() 存储与指定元素相关的任意数据. .dequeue() ...