AJAX请求

请求文件 txt

{
    "Rows":[
        {
            "id":"118",
            "name":"北欧客厅套餐",
            "imgPath":"https://img1.baidu.com/it/u=3600272149,3083784625&fm=26&fmt=auto"
        },
        {
            "id":"118",
            "name":"新中式风格",
            "imgPath":"https://img1.baidu.com/it/u=1530783331,3305982952&fm=26&fmt=auto"
        }
    ],
    "Total":2
}
View Code

   

原生请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生AJAX请求方法</title>
    <style>
        * {
            padding: 0;margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        ul { list-style: none; }
        li {
            position: relative;
            display: inline-block;
            width: 300px;
            margin-right: 10px;
        }
        div {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-bottom: 50%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        div img {
            position: absolute;top: 0;
            width: 100%;height: 100%;
            object-fit: cover;
        }
        p {
            position: absolute;
            bottom: 0;
            z-index: 2;
            padding: 5px 0 5px 10px;
            font-size: 18px;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul id="lst">
    </ul>
    <script>
        var lst = document.getElementById("lst");

        // 发送异步请求
        // 1、创建 ajax 引擎对象--所有操作都是由 ajax 引擎完成
        var xhr = new XMLHttpRequest();

        // 2、为引擎对象绑定监听事件
        xhr.onreadystatechange = function () {

            // 当状态发生变化时处理的事情
            if (xhr.readyState == 4 && xhr.status == 200) {

                // 5、接收响应消息
                var rows = JSON.parse(xhr.responseText).Rows;
                var i, html = "";
                for (i = 0; i < rows.length; i++) {
                    html += ' <li class="item"> '
                        + '     <div><img src="' + rows[i].imgPath + '" alt="picture"/></div> '
                        + '     <p>' + rows[i].name + '</p> '
                        + '   </li> ';
                }
                lst.innerHTML = html;
            }
        }

        // 3、绑定服务器地址
        // 参数1：请求方式 GET | POST。
        // 参数2：后台服务器地址或请求数据地址。
        // 参数3：是否异步，false 为同步，默认异步 true。
        xhr.open("get", "txt4", true);

        // 4、发送请求
        xhr.send();
    </script>
</body>
</html>
View Code

 

jQuery 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery AJAX请求</title>
    <style>
        * {
            padding: 0;margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        body { margin: 20px; font-size: 0}
        ul { list-style: none;}
        li {
            position: relative;
            width: 300px;
            margin-bottom: 10px;
        }
        div {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-bottom: 50%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        div img {
            position: absolute;top: 0;
            width: 100%;height: 100%;
            object-fit: cover;
        }
        p {
            position: absolute;
            bottom: 0;
            z-index: 2;
            padding: 5px 0 5px 10px;
            font-size: 18px;
            color: #fff;
        }

        .num {font-size: 20px;color: #000}

        .loading {
            width: 40px;
            height: 0;
            margin-left: 130px;
            opacity: 0;
        }

        .loadingShow {
            height: 40px;
            opacity: 1;
            transition: opacity .3s;
        }
    </style>
    <script src="../../../jquery-3.1.0.min.js"></script>
</head>
<body>
<img class="loading" src="data:image/gif;base64,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">
<ul id="lst"> </ul>
<p class="num"></p>
<script>
    $.ajax({
        type: "get",
        url: "txt4",
        dataType: 'json',
        async: true,
        beforeSend: function () {
            $(".loading").addClass("loadingShow")
        },
        success: function (data) {
            $(".loading").removeClass("loadingShow")
            var rows = data.Rows;  // 添加 dataType 为 json 后，将 data 转为对象格式（JSON.parse(data)）。
            var i, html = "";
            for (i = 0; i < rows.length; i++) {
                html += ' <li class="item"> '
                    + '     <div><img src="' + rows[i].imgPath + '" alt="picture"/></div> '
                    + '     <p>' + rows[i].name + '</p> '
                    + '   </li> ';
            }
            lst.innerHTML = html;
            $(".num").html(data.Total);
        }
    })
</script>
</body>
</html>
View Code

 

 

 

参考学习：https://www.cnblogs.com/xiaohuochai/p/6036475.html

posted @ 2021-09-24 11:22  し7709  阅读(56)  评论(0)    收藏  举报