实现Ajax分页

本文介绍了如何使用jQuery实现Ajax分页功能。通过监听页面加载事件,调用自定义的`myf`函数来处理分页操作。该函数根据传入的参数(首页、上一页、下一页、末页)更新当前页数,并使用`$.post`发送Ajax请求获取分页数据。接收到服务器返回的数据后,利用`split`方法解析数据,将JSON字符串转换为JavaScript对象数组,并动态构建表格展示商品信息。同时,更新最大页数并展示当前页数和总页数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    <!-- 引入jQuery的类库 -->
    <script type="text/javascript" scr="js/jquery-3.3.1.js"></script>
    <!-- 另起一个script块 -->
    <script type="text/javascript">
    //页面载入函数
    $(function(){
        //默认显示第1页
        myf('a');
    })
    //扩大作用域
    var pageIndex;
    var max;
    //写一个方法专门控制分页
    function myf(type){
        if(type=='a'){
            //首页
            pageIndex=1;
        }
        else if(type=='b'){
            //上一页
            if(pageIndex>1){
                pageIndex--;
            }
            else{
                alert("兄die,已经是第一页了嘞");
            }
        }
        else if(type=='c'){
            //下一页
            if(pageIndex<max){
                pageIndex++;
            }
            else{
                alert("兄die,已经是最后一页了嘞");
            }
        }
        else{
            //末页
            pageIndex=max;
        }
        //ajax
        $.post("page.do", {pid:pageIndex}, function(data) {
            //用*分割
            var x=data.split("*");
            //x[0]代表json格式的对象数组字符串
            //x[1]代表max值 
            //将json格式的对象数组字符串-->js的对象数组
            var ss=$.parseJSON(x[0]);
            //给max赋值
            max=parseInt(x[1]);
            var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
            //循环遍历
            $.each(ss, function(i, g) {//下标,元素=对象
                sb+="<tr align='center'>";
                sb+="<td>"+g.gid+"</td>";
                sb+="<td>"+g.gname+"</td>";
                sb+="<td><img src='"+g.gpath+"'/></td>";
                sb+="</tr>";
            })
            sb+="</table>";
            sb+="["+pageIndex+"/"+max+"]";
            //给div赋值
            $("#aa").html(sb);
        })
    }
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值