AJAX请求

2021-09-24 11:36:26 阅读：89 来源： 互联网

标签：box 请求 width AJAX html 10px position border

请求文件 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,R0lGODlhIAAgALMAAP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAAACwAAAAAIAAgAAAE5xDISSlLrOrNp0pKNRCdFhxVolJLEJQUoSgOpSYT4RowNSsvyW1icA16k8MMMRkCBjskBTFDAZyuAEkqCfxIQ2hgQRFvAQEEIjNxVDW6XNE4YagRjuBCwe60smQUDnd4Rz1ZAQZnFAGDd0hihh12CEE9kjAEVlycXIg7BAsMB6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YEvpJivxNaGmLHT0VnOgGYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHQjYKhKP1oZmADdEAAAh+QQFBQAAACwAAAAAGAAXAAAEchDISasKNeuJFKoHs4mUYlJIkmjIV54Soypsa0wmLSnqoTEtBw52mG0AjhYpBxioEqRNy8V0qFzNw+GGwlJki4lBqx1IBgjMkRIghwjrzcDti2/Gh7D9qN774wQGAYOEfwCChIV/gYmDho+QkZKTR3p7EQAh+QQFBQAAACwBAAAAHQAOAAAEchDISWdANesNHHJZwE2DUSEo5SjKKB2HOKGYFLD1CB/DnEoIlkti2PlyuKGEATMBaAACSyGbEDYD4zN1YIEmh0SCQQgYehNmTNNaKsQJXmBuuEYPi9ECAU/UFnNzeUp9VBQEBoFOLmFxWHNoQw6RWEocEQAh+QQFBQAAACwHAAAAGQARAAAEaRDICdZZNOvNDsvfBhBDdpwZgohBgE3nQaki0AYEjEqOGmqDlkEnAzBUjhrA0CoBYhLVSkm4SaAAWkahCFAWTU0A4RxzFWJnzXFWJJWb9pTihRu5dvghl+/7NQmBggo/fYKHCX8AiAmEEQAh+QQFBQAAACwOAAAAEgAYAAAEZXCwAaq9ODAMDOUAI17McYDhWA3mCYpb1RooXBktmsbt944BU6zCQCBQiwPB4jAihiCK86irTB20qvWp7Xq/FYV4TNWNz4oqWoEIgL0HX/eQSLi69boCikTkE2VVDAp5d1p0CW4RACH5BAUFAAAALA4AAAASAB4AAASAkBgCqr3YBIMXvkEIMsxXhcFFpiZqBaTXisBClibgAnd+ijYGq2I4HAamwXBgNHJ8BEbzgPNNjz7LwpnFDLvgLGJMdnw/5DRCrHaE3xbKm6FQwOt1xDnpwCvcJgcJMgEIeCYOCQlrF4YmBIoJVV2CCXZvCooHbwGRcAiKcmFUJhEAIfkEBQUAAAAsDwABABEAHwAABHsQyAkGoRivELInnOFlBjeM1BCiFBdcbMUtKQdTN0CUJru5NJQrYMh5VIFTTKJcOj2HqJQRhEqvqGuU+uw6AwgEwxkOO55lxIihoDjKY8pBoThPxmpAYi+hKzoeewkTdHkZghMIdCOIhIuHfBMOjxiNLR4KCW1ODAlxSxEAIfkEBQUAAAAsCAAOABgAEgAABGwQyEkrCDgbYvvMoOF5ILaNaIoGKroch9hacD3MFMHUBzMHiBtgwJMBFolDB4GoGGBCACKRcAAUWAmzOWJQExysQsJgWj0KqvKalTiYPhp1LBFTtp10Is6mT5gdVFx1bRN8FTsVCAqDOB9+KhEAIfkEBQUAAAAsAgASAB0ADgAABHgQyEmrBePS4bQdQZBdR5IcHmWEgUFQgWKaKbWwwSIhc4LonsXhBSCsQoOSScGQDJiWwOHQnAxWBIYJNXEoFCiEWDI9jCzESey7GwMM5doEwW4jJoypQQ743u1WcTV0CgFzbhJ5XClfHYd/EwZnHoYVDgiOfHKQNREAIfkEBQUAAAAsAAAPABkAEQAABGeQqUQruDjrW3vaYCZ5X2ie6EkcKaooTAsi7ytnTq046BBsNcTvItz4AotMwKZBIC6H6CVAJaCcT0CUBTgaTg5nTCu9GKiDEMPJg5YBBOpwlnVzLwtqyKnZagZWahoMB2M3GgsHSRsRACH5BAUFAAAALAEACAARABgAAARcMKR0gL34npkUyyCAcAmyhBijkGi2UW02VHFt33iu7yiDIDaD4/erEYGDlu/nuBAOJ9Dvc2EcDgFAYIuaXS3bbOh6MIC5IAP5Eh5fk2exC4tpgwZyiyFgvhEMBBEAIfkEBQUAAAAsAAACAA4AHQAABHMQyAnYoViSlFDGXBJ808Ep5KRwV8qEg+pRCOeoioKMwJK0Ekcu54h9AoghKgXIMZgAApQZcCCu2Ax2O6NUud2pmJcyHA4L0uDM/ljYDCnGfGakJQE5YH0wUBYBAUYfBIFkHwaBgxkDgX5lgXpHAXcpBIsRADs=">
<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

标签：box,请求,width,AJAX,html,10px,position,border
来源： https://www.cnblogs.com/L-xjco/p/15329509.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

AJAX请求