当前位置：首页 > news >正文

AJAX入门-AJAX 概念和 axios 使用

news 2025/9/10 8:46:55

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

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

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

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

系列文章目录

简述ajax、node.js、webpack、git

AJAX入门-AJAX 概念和 axios 使用

AJAX入门-URL

系列文章目录

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

1、下载软件

2、VS Code 基本操作

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

(2)重启VS code

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

二、AJAX

1.什么是AJAX

2.怎么用AJAX

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

案例：

<!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>

在浏览器中打开：

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

<!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>