站长资源
中国站长网站

ajax接收json数据实现分页

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>JSON分页</title>
</head>
<body>

<script type="text/javascript">
function getPageList(pageno){

    var req=new XMLHttpRequest();
    req.open('get','./JSON_Fenye.php?pageno='+pageno);
    req.onreadystatechange=function(){
        if(req.readyState==4 && req.status==200){

            //将传来的字符串转化为对象
            eval('var info='+req.responseText);
            var str='<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>等级</th></tr>';
            
            //循环取出info对象中的数据
            for(var i=0,n=info.length-1;i<n;i++){
    str+='<tr><td>'+info[i].id+'</td><td>'+info[i].name+'</td><td>'+info[i].email+'</td><td>'+info[i].level+'</td></tr>';
            }

            //分页链接
            str+='<tr><td colspan="4" align="center">';
            for(var i=1;i<=info[info.length-1];i++){

                str+='<a href="javascript:void(0)" onclick="getPageList('+i+')">'+i+'</a>&nbsp;';
                console.log(i);
            }
            str+='</td></tr>';

            //把数据输出到浏览器
            document.getElementById('result').innerHTML=str;
        }
    }
    req.send(null);
}

//默认显示第一页
window.onload=function(){
    getPageList(1);
}
</script>

<table id='result'></table>
</body>
</html>

后端代码:

<?php 

/**
*JSON分页
*/

//链接数据库
@mysql_connect('localhost','root','');
@mysql_select_db('empmanage');
@mysql_query('set name utf8');

//获取总记录数
$rs = mysql_query('select count(*) from emp');
$rows = mysql_fetch_row($rs);
$recordCount = $rows[0];

//每页显示多少条pageSize
$pageSize = 5;

//总页数 = 总记录/每页显示多少
$pageCount=ceil($recordCount/$pageSize);

//获取当前页  三元运算 若不存在pageNow则默认显示第1页
$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1;

if ($pageNow < 1) {
    $pageNow = 1;
}elseif ($pageNow > $pageCount) {
    $pageNow = $pageCount;
}

//起始位置  每页从第几条数据显示
$pageStart = ($pageNow-1)*$pageSize;

//从哪条开始显示,限制每页显示几条
$sql = "select * from emp limit $pageStart,$pageSize";

//链接数据库
$rs = mysql_query($sql);

//定义数组,把数据存放在数组中
$info = array();
while ($rows = mysql_fetch_assoc($rs)) {
    $info[] = $rows;
}

//将总页码保存到数组
$info[] = $pageCount;

echo json_encode($info);

 ?>

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » ajax接收json数据实现分页

评论 抢沙发

评论前必须登录!