Ajax
Ajax（Asynchronous JavaScript And XML，异步的JavaScript和XML）。
作用是：
- 数据交换：通过Ajax可以给服务器发送哀求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- </head>
- <body>
- <input type="button" value="获取数据" onclick="getClick()">
- </body>
- <script>
- function getClick() {
- // 创建一个XMLHttpRequest对象
- let XmlHttpRequest = new XMLHttpRequest();
-
- // 设置请求方式和请求地址
- XmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');
- XmlHttpRequest.send(); // 发送请求
- // 监听请求状态
- XmlHttpRequest.onreadystatechange = function() {
- if (XmlHttpRequest.readyState === 4 && XmlHttpRequest.status === 200) {
- // console.log(XmlHttpRequest.responseText);
- let data = JSON.parse(XmlHttpRequest.responseText);
- console.log(data);
- }
- }
- }
- </script>
- </html>
Axios对原生的Ajax进行了封装，简化誊写，快速开发。
必要引入Axios的JS文件，使用Axios发送哀求，并获取响应结果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- </head>
- <body>
- <script>
- axios({
- method: 'get',
- url: 'http://localhost:3000/lab'
- }).then((response) => {
- console.log(response.data)
- });
- axios({
- method: 'post',
- url: 'http://localhost:3000/lab',
- data: {
- name: 'Lab 1',
- description: 'Lab 1 description'
- }
- }).then((response) => {
- console.log(response.data)
- });
- </script>
- </body>
- </html>
- axios.get(url [,config])
- axios.delete(url [,config])
- axios.post(url [,data [,config]])
- axios.put(url [,data [,config]])
Axios中文文档 | Axios中文网 (axios-http.cn)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
