筑坐极_Ajax阿贾克斯Get示例

JavaScript部分:

<script>
    $(function () {
        let now = 3;

        let timer = setInterval(function () { //循环执行 . (实现动画效果)
            now ++;
            if (now == 4){
                now = 0;
            }
            changeDot(now);//循环执行此函数
        }, 300)

        function changeDot(n) {
            if(n==3){
                $(".loading>a").eq(0).text(".");
                $(".loading>a").eq(1).text(".");
                $(".loading>a").eq(2).text(".");
            }else if (n==2){
                $(".loading>a").eq(0).text(".");
                $(".loading>a").eq(1).text(".");
                $(".loading>a").eq(2).text("");
            } else if(n==1){
                $(".loading>a").eq(0).text(".");
                $(".loading>a").eq(1).text("");
                $(".loading>a").eq(2).text("");
            }else if (n==0){
                $(".loading>a").eq().text("");
            }
        }
        let url = "http://106.14.192.118/query_by_page";
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json", //定义返回值类型
            data: {}, //参数传递
            success: function (data) {
                console.log("data:");
                let arr = data["data"]["本页内容"];
                console.log(arr);
                let htmlPart = "";
                for (let i = 0; i < arr.length; i++) {
                    let one = arr[i];
                    htmlPart += '<tr><td>'+one['id']+'</td><td><img src="'+one['pic']+'" alt="" class="MY-IMG"></td><td>'+one['title']+'</td><td>'+one['des']+'</td></tr>';
                } // htmlPart 中插入遍历后得到的数据
                $(".loading").hide(); //加载成功后 隐藏 .loading 类
                clearInterval(timer); //关闭 timer 循环
                $(".table-hide").show(); //显示 .table-hide
                $(".tbd").append(htmlPart);// 在定义的表格中加入查询到的数据
            },
            error:function (err) {
                console.log("数据加载失败!!!")
            }
        })
    })
</script>

CSS部分:

<style>
    .MY-IMG{
        width: 50%; /*图片宽度像素 50%*/
        height: auto; /*高度居中*/
    }
    .loading{
        text-align: center;
        margin-top: 18px;
    }
    .table-hide{
        display: none;
    }
    .loading>a{
        display: inline-block;
        width: 10px;
        height: 10px;
    }
</style>

Ajax阿贾克斯Get示例

丁*

GET

在数据查询成功之前,页面有一定的空窗期.加入加载动画,使页面展示效果更完善.

2021.06.24

825人

丁*

吉林省白城市通榆县

Hot:825

丁*

当前作品暂无评分

还未获得评语哦~