ajax使用案例

时间：2019-06-08 13:53:55 阅读：102 评论：0 收藏：0 [点我收藏+]

1、初步了解

这里可以修改网络快和慢。限网，流量式的，做模拟的。

network->all代表加载的所有事件

技术分享图片

后面的那个显示有/，这个是首路由。后面有很多svg和js等文件

技术分享图片

想要这个服务器的地址，使用network->XHR 它是XMLHttpRequest 。

ajax封装的就是这个XHR对象。这里就能看到这个对象

技术分享图片

对象里有很多数据，没必要去看原生js的这个方法

技术分享图片

小**的接口：它调用的接口就是banner

技术分享图片

点击banner就可以看到服务器的接口，请求方式，状态码，远程ip等等

技术分享图片

下面是有响应头和请求头：

技术分享图片

这里可以修改请求设备：

技术分享图片

当点一下的时候又调用了很多接口，每个接口对应了很多数据。

技术分享图片

我们把请求发出去了，然后看的是响应，响应的数据我们要进行渲染。响应的数据就是response ,preview是预渲染的视图。

技术分享图片

将cover添加https: 进行访问，查看这个资源

技术分享图片

就是它的一张图片：

技术分享图片

2、实际原理演示

添加回调函数

        $(function () {
            
        })

获取首页数据，发送ajax请求。请求url，请求方式，成功之后的回调函数。

        $(function () {
            $.ajax({})
        })

然后填我的请求地址：

技术分享图片

两个之间逗号隔开

 $(function () {
            $.ajax({
                url:‘https://api.apeland.cn/api/banner/‘,
                methods:‘get‘,
                success:function () {
                    
                },
                error:function () {
                    
                }
            })
        })

再看下面代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降风云变</title>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:‘https://api.apeland.cn/api/banner/‘,
                methods:‘get‘,
                success:function (res) {
                    console.log(res);
                },
                error:function (err) {
                    console.log(err); 
                }
            })
        })
    </script>
</body>
</html>

将我们请求之后服务器回应的数据打印出来，就是一个对象。

技术分享图片

然后我们可以对这个服务器返回的数据进行解析，如果code是0，然后对data里面的数据做啥操作。

这是一个数组，一个元素，直接取这一个数组元素

技术分享图片

现在要获取数组中的cover：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降风云变</title>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:‘https://api.apeland.cn/api/banner/‘,
                methods:‘get‘,
                success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
                        console.log(cover);
                    };

                },
                error:function (err) {
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>

View Code

success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
                        console.log(cover);
                    };

                },

技术分享图片

然后需要创建一个img将这个图片插入到我的页面中。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降风云变</title>
</head>
<body>
    <div id="box">

    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:‘https://api.apeland.cn/api/banner/‘,
                methods:‘get‘,
                success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
                        console.log(cover);
                        $(‘#box‘).append(`<img src=${cover} alt=${name}>`)
                    };

                },
                error:function (err) {
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>

View Code

  success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;

　　　　　　　　　　　　　　　　var name=res.data[0].name;

　　　　　　　　　　　　　　　　console.log(cover); 
　　　　　　　　　　　　　　$(‘#box‘).append(`<img src=${cover} alt=${name}>`) //追加元素。追加标签用反引号，标签里用服务器返回的数据，使用${}接收变量,${}不用引起来
　　　　　　　　　　　　}; },

这样就出来了：

技术分享图片