AJAX入门
目录
什么是AJAX?
定义：我认为AJAX就是 获取服务器数据，并显示在浏览器中
怎么用AJAX?
1 先使用axios 库 ，与服务器进行数据通信
2 在学习XMLHttpRequest 对象的使用，了解Ajax底层原理
本篇博客，介绍第一点：使用axios 库 ，与服务器进行数据通信
原因
1 使用广：在之后做Vue,React项目，都会使用到axios
2 使用简单，方便理解
axios 使用
语法
1 引入 axios .js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2 使用axios 函数
- 传入配置对象
- 再使用.then回调函数，接受结果，并作后续处理
需求：请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址：https://hmajax.itheima.net/api/province
如下图所示：来自黑马服务器的省份信息
打开idea创建Web项目，具体代码如下
1 首先跟axios库建立连接：
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2 其次 才可以使用axios函数 与获取省份数据服务器建立连接：https://hmajax.itheima.net/api/province
3 .then:建立连接后，得到数据<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>41111111</p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- 首先跟axios库建立连接： https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 其次 才可以使用axios函数 与获取省份数据服务器建立连接： https://hmajax.itheima.net/api/province .then:建立连接后，得到数据 --> <script> axios({ url:'https://hmajax.itheima.net/api/province'}).then(result => { console.log(result) // 在控制台打印省份数据 }) </script> </body> </html>点击tomcat服务器运行
浏览器显示：
鼠标右击检查，选择控制台
鼠标点击 object,选择data-list
通过控制台的展示，我们就知道：我们已经成功的从服务器得到省份数据并展示到浏览器中
原文地址：https://blog.csdn.net/m0_74124657/article/details/142393217
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！