前端前置——ajax
目标：使用axios库，获取省份列表数据，展示到页面上
axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
省份数据地址：http://hmajax.itheima.net/api/province
axios的使用
axios({
url:'目标资源地址'
}).then(result)=>{
//对服务器返回的数据做后续处理
})
url告诉axios去哪个地址进行数据交互；result回调函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'http://hmajax.itheima.net/api/province'}).then(result => {// console.log(result.data.list)//js中 join方法用于把数组中的所有元素放入一个字符串; 元素是通过指定的分隔符进行分隔的document.querySelector(".my-p").innerHTML = result.data.list.join('<br>')})</script>
</body>
</html>axios — 查询参数
语法：使用axios提供的params选项
axios({
url:'目标资源地址',
params:{
参数名：值
}
}).then(result => {
//对服务器返回的数据做后续处理
})
这里axios在运行时会把参数名和值拼接到url?参数名=值