什么是AJAX?
AJAX是异步的JavaScript和XML。简单来说，就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它异步的特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面
概念：AJAX是浏览器与服务器进行数据通信的技术
怎样使用AJAX？
先使用axios库，与服务器进行数据通信
axios使用
语法：
- 引入axios.js : https://cdn.unpkg.net/ npm/ axios/ dist/ axios.min.js（jsdelivr cdn）不能用
- 使用axios函数
传入配置对象，再用.then回调函数接收结果，并做后续处理
axios({
url:'目标资源地址'
}).then((result)=>{
})
使用axios库将省份列表插入到页面
<body>
<script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
</script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
})
</script>
</body>
要从result对象获取数据
console.log(result.data.list)
全部代码：
<body>
<p class="ok"></p>
<script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
</script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
console.log(result.data.list)
console.log(result.data.list.join('<br>'));//拼接字符串
//插入页面
document.querySelector('.ok').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » AJAX(1)——axios库的使用
发表评论 取消回复