练习-用ajax做一个分页效果

最新推荐文章于 2021-08-06 04:32:35 发布

奋斗中的切图猿

最新推荐文章于 2021-08-06 04:32:35 发布

阅读量105

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_44573096/article/details/109118986

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin:0;
            padding:0;
            list-style:none;
            overflow:hidden;
        }
        #wrap{
            width:600px;
            height:150px;
            border:1px solid red;
        }
        li{
            width:130px;
            height:130px;
            background-color:green;
            font-size:22px;
            float:left;
            margin-right:20px;
            color:white;
        }
        button{
            height:20px;
            padding:0;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
            <!-- <li>第1件商品，苹果1，价格：6元</li>
            <li>第2件商品，苹果2，价格：6元</li>
            <li>第3件商品，苹果3，价格：6元</li>
            <li>第4件商品，苹果4，价格：6元</li> -->
        </ul>
        <div id="ctrl">
            <!-- <button>第1页</button>
            <button>第2页</button>
            <button>第3页</button>
            <button>第4页</button> -->
        </div>
    </div>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $.getJSON("zuoye.txt",function(data){
            //一开始就调用的原因：页面一刷新就显示第一组
            showF(0,data);   //data是jq封装的ajax库从后台获取的数据，是一个局部变量，当ajax调用成功后返回的数据，没调用前没有这个data
            // 设置按钮的个数
            var aBtnlen=Math.ceil(data.length/4);
            for(var i=0;i<aBtnlen;i++){
                $("<button>").html(`第${i+1}页`).click(function(){
                    showF($(this).index(),data);  //$(this).index()表示当前按钮在父元素中的下标
                }).appendTo($("#ctrl"));
            }
        })
        function showF(n,arr){//n表示由第几个按钮被点击所展示的商品。
            $("ul").html("");//每次调用showF这个函数时，让ul的页面为空
            // 第一个按钮，下标为0，n=0；第一页里放的内容的小标是从0-3，第二页内容里放的东西是从4-7，一次类推，所以循环的截止条件如下
            for(var i=4*n;i<4*(n+1) && i<arr.length;i++){  //i<arr.length的原因是防止报错（当最后一页的数据没有到达4*n+3的数量会报错）
                var str=`第${arr[i].id}件商品，${arr[i].name}，价格：${arr[i].price}元`;
                $("<li>").html(str).appendTo("ul");
            }
        }
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习-用ajax做一个分页效果

效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{
复制链接

扫一扫