目录
AJAX的概念
简单可以理解为想指定的url获取指定的数据。
小知识点箭头函数
箭头函数是一种新的函数语法，旨在提供一种更简洁的方式来编写函数。
它与传统的function相比比较容易
传统函数格式
var sum = function(a, b) {
return a + b;
};
箭头函数格式
const sum = (a, b) => a + b;
AJAX的作用
让浏览器和服务器之间通信，动态数据交互
axios的使用
首先需要引入axios库
代码如下
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
然后就是使用
axios({
url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理（这里的result就是服务器返回的数据）
})
例子如下
<!DOCTYPE html>
<html lang="en">
<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>AJAX概念</title>
</head>
<body>
<p class="my-p"></p>
<!-- 这里将问题 -->
<!-- 1.引入axios库 -->
<script src="https://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('<br>'))
// 把准备好省份列表，插入到页面
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>
结果如图
