初次使用axios
- axios函数
axios({
url: 这里写要访问的网址
}).then(function(result){
函数语句
})
直接上代码
<body>
<p></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>//引入axios
<script>
axios({
url: "http://hmajax.itheima.net/api/province"
}).then(function(result){//用上then方法,回调函数的形参为获取的数据
const p = document.querySelector('p')
p.innerHTML = result.data.list.join("<br>")
})
</script>
URL查询参数
查询参数是浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://www.bilibili.com/video?参数名1=值1&参数名2=值2
- 在axios中使用查询参数
axios({
url: 这里写要访问的网址
params:{
参数名:值
}
}).then(function(result){
函数语句
})
document.querySelector('button').addEventListener('click',function(){
axios({
url: "https://hmajax.itheima.net/api/area",
params: {
pname: document.querySelector('.one').value,
cname: document.querySelector('.two').value
}
}).then(function(r){
console.log(r);
let ul=document.querySelector('ul')
ul.innerHTML=''
for(let i=0;i<r.data.list.length;i++)
{
let li = document.createElement('li')
li.innerHTML=r.data.list[i]
ul.appendChild(li)
}
})
})