Ajax与Axios的使用

最新推荐文章于 2024-07-06 19:25:43 发布

脱发使我稳重

最新推荐文章于 2024-07-06 19:25:43 发布

阅读量63

点赞数 1

分类专栏： Ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/131593354

版权

Ajax 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

注意事项：学完JavaScript后：学习到的库都需要引入地址：可以使官方文件相对路径地址；也可以是将官方文档库保存到工作区引入的相对地址。通过script标签引入文件或者官方库地址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的使用</title>
    <!-- 目标资源地址：http://hmajax.itheima.net/api/province -->
    <!-- axios库地址：cdn.jsdelivr.net_npm_axios_dist_axios.min.js -->
</head>
<body>


    <p class="my-p"></p>

    <!-- 引入axios库 -->
    <script type="text/javascript" src="../cdn.jsdelivr.net_npm_axios_dist_axios.min.js"></script>
    
    <!-- 使用axios函数 -->
   <script>
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(result => {
            console.log(result)
            // 拿到data对象数组列表         养成好习惯：多打印，确认属性名
            console.log(result.data.list)
            // join() 方法是 JavaScript 数组的一个方法，用于将数组的所有元素连接成一个字符串。通过指定一个可选的分隔符作为参数，join() 方法会将数组中的每个元素转换为字符串，并使用分隔符将它们连接起来形成一个新的字符串。
            console.log(result.data.list.join('<br>'))
            // 把准备好的省份列表，插入到页面中
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
            // 上面这行代码的意思就是：获取到p标签元素后，将回调函数返回的数据中心data对象中的元素列表通过数组转字符串后赋值给p标签，从而实现页面渲染信息效果。
        })
   </script>


</body>
</html>