AJAX入门-AJAX 概念和 axios 使用

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder、VS code中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML、CSS、JavaScript系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

**点赞关注不迷路！**您的点赞、关注和收藏是对小编最大的支持和鼓励！
温馨提示：全文内容较长，可先收藏再食用！文章可作为学习AJAX的笔记，框架和主要内容来源于B站UP主-黑马程序员的视频：黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖小编进行了整理并对一些内容进行了补充和注释，非商用，如有侵权，必删改！

系列文章目录

简述ajax、node.js、webpack、git

AJAX入门-URL、参数查询、案例查询

AJAX入门-常用请求方法和数据提交、HTTP协议-报文、接口文档、案例实战

系列文章目录

[一、环境准备-安装Visual Studio Code、Chrome](#一、环境准备-安装Visual Studio Code、Chrome)

1、下载软件

[2、VS Code 基本操作](#2、VS Code 基本操作)

[(1)下载两个插件： open in browser & chinese(simplified)](#(1)下载两个插件： open in browser & chinese(simplified))

[(2)重启VS code](#(2)重启VS code)

[3.使用 axios](#3.使用 axios)

一、环境准备-安装Visual Studio Code、Chrome

1、下载软件

可以点击链接进行下载，或者进入官网自行下载

通过网盘分享的文件：软件包.zip

链接: https://pan.baidu.com/s/187ALjX75P-416UDzW7FOhA 提取码: fg5w

2、VS Code 基本操作

(1)下载两个插件： open in browser & chinese(simplified)

(2)重启VS code

输入Reload Window

(3)将谷歌设置为默认浏览器

二、AJAX

1.什么是AJAX

2.怎么用AJAX

3.使用 axios（案例）

引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
目标资源地址：http://hmajax.itheima.net/api/province

案例：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.AJAX概念和axios使用</title>
  </head>
  <body>
    <!-- // axios库地址:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    // 省份数据地址： http://hmajax.itheima.net/api/province
    // 目标：使用axios库，获取省份列表数据，展示到页面上
        1.引入axios函数  -->
    <script src="http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">  
    </script>
    <script>
        // 2.使用axios函数
        axios({
            url:'http://hmajax.itheima.net/api/province'
        }).then(result=>{
            console.log(result)
            //好习惯 多打印 确认属性名
            console.log(result.data.list)
        })
    </script>
  </body>
</html>

在浏览器中打开：

在此基础上，进一步编写：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.AJAX概念和axios使用</title>
  </head>
  <body>
    <!-- // axios库地址:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    // 省份数据地址： http://hmajax.itheima.net/api/province
    // 目标：使用axios库，获取省份列表数据，展示到页面上
        1.引入axios函数  -->
    <!-- //加入P标签 让列表显示出来 -->
    <p class="my-p"></p>
    <script src="http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">  
    </script>
    <script>
        // 2.使用axios函数
        axios({
            url:'http://hmajax.itheima.net/api/province'
        }).then(result=>{
            console.log(result)
            //好习惯 多打印 确认属性名
            console.log(result.data.list)
            //数组转字符串，指定拼接符，用join方法
            console.log(result.data.list.join('<br>'))
            //把准备好的省份列表，插入到页面
            document.querySelector('.my-p').innerHTML =result.data.list.join('<br>')
                })
    </script>
  </body>
</html>