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. Swift学习－枚举（Enumerations）的使用方法

    Swift学习-枚举的使用方法 枚举的使用语法: enum someEnumer { // 枚举的成员值 } 以下是方向的一个例子: enum direction { case Up case Dow ...

  2. nginx 根据域名反向代理

    #nginx 反向代理域名,会根据启动时候解析出来的ip,加载到内存中,后面不会改变可以绑定hosts或者指定resolve服务器来固定ip #注意proxy最后的斜杠,如果不加会将请求过来的目录带到 ...

  3. sql 转 markdown

    https://github.com/2liang/AutoBuildDocFromDB SQL脚本生成数据字典 http://www.jianshu.com/p/f491d0d3c503 这两个脚本 ...

  4. VUE入门实例，模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  5. Zigbee-CC2530开发板协议栈-改动发射功率

      CC2530 控制输出功率的寄存器是 TXPOWER: 推荐功率设置: 协议栈默认的设置是 0xd5,为了扩展信号传输的距离,我把TXPOWER寄存器值改为0xf5, 此时输出功率为4.5dBm. ...

  6. python c example2:pylame2

    #include <Python.h> #include <lame.h> //pyton object variables typedef struct{ PyObject_ ...

  7. OpenAPI初体验

    问题的一开始源于客户和服务部门抱怨我的REST API文档写得不好,然后又了解到 django rest framework 利用 coreapi 能自动生成文档,再就是看到 swagger.io 上 ...

  8. ThinkPHP 处理商品添加的时候操作多张表 用事务解决。

    #重新父类的add方法 public function add(){ #同时操作多装表,可以考虑用事务来做,要同时插入数据成功要么都不插输入数据. #开启事务的前提是表的引擎必须是InnoDB #开启 ...

  9. 自定义实现wcf的用户名密码验证

    目前wcf分为[传输层安全][消息层安全]两种,本身也自带的用户名密码验证的功能,但是ms为了防止用户名密码明文在网络上传输,所以,强制要求一旦使用[用户名密码]校验功能,则必须使用证书,按照常理讲, ...

  10. weblogic 8.1教程之部署(三)

    在 weblogic 都配置好了之后.就能够部署项目了. 部署项目的时候,能够大体分为两个步骤: 1,创建缓冲池: 2,配置数据源. 先启动 weblogicserver.进入weblogic 的主页 ...