【ajax】9.Axios：Axios发送AJAX请求+Axios函数发送AJAX请求

最新推荐文章于 2023-07-25 08:05:24 发布
最新推荐文章于 2023-07-25 08:05:24 发布
阅读量181 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43210113/article/details/110823850
版权

〇、前情提要

在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。

参考：

  1. 我的笔记：
    【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
    https://blog.csdn.net/weixin_43210113/article/details/110628389

  2. b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
    https://www.bilibili.com/video/BV1WC4y1b78y?p=2

  3. 笔记视频链接
    链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
    提取码：3waj

  4. BootCDN
    https://www.bootcdn.cn

  5. github - Axios
    https://github.com/axios/axios

  6. bootsCDN - axios
    https://www.bootcdn.cn/axios/
    ————————————————————————————

  7. 我的笔记：
    【ajax】8.jQuery：jQuery发送AJAX请求+jQuery通用方法发送AJAX请求
    https://blog.csdn.net/weixin_43210113/article/details/110821496

一、Axios发送AJAX请求

如没有安装过NodeJS和expressjs请看↓

我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188

如没有安装过nodemon请看

我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
https://blog.csdn.net/weixin_43210113/article/details/110792442

Axios介绍

Axios是ajax最热门的工具库

参考：
github - Axios
https://github.com/axios/axios

特性：

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF
安装

终端

npm install axios

在这里插入图片描述

引用

官网：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

但外网可能有点慢，使用bootsCDN

参考：
bootsCDN - axios
https://www.bootcdn.cn/axios/
在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

记得加crossorigin="anonymous"

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

1.get

axios.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
    	const btns = document.querySelectorAll('button');
    	
        btns[0].onclick = function () {
            //GET 请求
            axios.get('http://127.0.0.1:8000/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            });
        }
    </script>
</body>

</html>

在这里插入图片描述
get请求，无法对请求体参数做设置

axios语法

参考：
github - Axios
https://github.com/axios/axios

以baseURL为例

参考：
// baseURL will be prepended to url unless url is absolute.
// It can be convenient to set baseURL for an instance of axios to pass relative URLs
// to methods of that instance.
baseURL: 'https://some-domain.com/api/',

<script>
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                
            };
        }
</script>

获取参数

btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {

            }).then(value => {
                console.log(value);
            });
        }

在这里插入图片描述

2.post

axios#post(url[, data[, config]])
将data:{}直接放在第二个参数中

		btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }

在这里插入图片描述

axios.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    </script>
</body>

</html>
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

二、Axios函数发送AJAX请求

3.ajax

		btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }

在这里插入图片描述
在这里插入图片描述

axios.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>
server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});
绝不做九漏鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios进阶实践之利用最优雅的方式写ajax请求
10-18
在现代前端开发中，`axios` 是一个广泛使用的 JavaScript 库，用于发起 AJAX 请求，尤其在 Vue.js 生态系统中。本篇文章将深入探讨如何利用 `axios` 进行更优雅、更高效的 AJAX 请求实践。 首先，我们了解 `axios` ...
关于前端ajax请求的优雅方案（http客户端为axios）
08-28
异步的JavaScript：使用JavaScript语言以及相关浏览器提供的类库的功能向服务端发送请求，当服务端处理完请求之后，自动执行某个JavaScript的回调函数。 二、axios介绍 axios是一种支持Promise的API，请求成功后...
fetch发送Ajax请求
weixin_42541725的博客
02-23 227
fetch发送Ajax请求
Ajax--使用fetch函数发送AJAX请求
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-27 389
1.使用fetch函数发送AJAX请求 参考文档: 1.1 请求前的准备 1.1.1 HTML页面 ajaxDemo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
fetch发送AJAX请求
m0_51144154的博客
11-23 85
fetch发送AJAX请求 1). server.js //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); //3.创建路由规则 //request 是对请求报文的封装 //response 是对响应报文的封装 //fetch服务 app.all('/fetch-server', (request, response) => { //'/server'就相当于一个url
fetch函数发送ajax请求
qq_42524153的博客
11-05 216
fetch函数发送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> </head> <body&gt
fetch 发送 AJAX请求
qq_39368007的博客
11-26 155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch 发送 AJAX请求</title> </head> <body> &lt...
vue axios 在页面切换时中断请求方法 ajax
08-27
本文将详细讲解如何在Vue中利用axios实现页面切换时中断请求的方法。 首先，axios提供了一个`CancelToken`接口，可以用来取消未完成的请求。在Vue的原型上，我们可以定义一个全局的axios实例，并添加`CancelToken`...
小程序版结合promise的axios风格ajax请求函数
03-29
建议的小程序版本的axios函数，之所以说简易，因为只是用了常用的请求方法外，然后添加了拦截器而已。 具体如下： wxhttp 命名为wxhttp 具体的请求用法如axios wxhttp#request(config) wxhttp#get(url[,config]) ...
Axios.js源码文件
05-09
Axios提供请求和响应拦截器，允许在发送请求之前或接收响应之后添加额外的操作。例如，你可以添加认证令牌、格式化数据或处理错误。 4. **多种请求方法**： Axios支持所有的HTTP请求方法，如GET、POST、PUT、...
【Ajax】笔记-使用fetch函数发送AJAX请求
最新发布
德仔
07-25 619
fetch()是XMLHttpRequest的升级版,用于在JavaScript脚本里面发出 HTTP请求,本文章向大家介绍fetch()的用法,主要包括fetch()的用法使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。Fetch() 是 window.fetch 的 JavaScript polyfill。全局 fetch() 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest。
使用fetch函数发送ajax异步请求
X1nZz的博客
08-24 164
引入 在ajax处理异步请求中，除了原生XMLHttpRequest对象发送请求、jquery发送请求、axios发送等，还有在axios中用fetch发送ajax请求，而且也是跟jquery一样看起来非常简洁明了 后台服务代码 //fetch服务 @RequestMapping(value = "/fetch-server") @ResponseBody public String test13(HttpServletRequest req, HttpServletResp
fetch发起ajax请求
zgh472365411的博客
09-06 379
fetch发送Ajax请求
ajax的用法——基于fetch
孙朝阳的博客
02-02 281
fetch是用来取代XMLHttpRequest 基于promise的设计！ 简单用法如下： fetch("/fetch1", { method:"post", headers:{ "content-type": "application/json" }, body:JSON.stringify({
使用 Fetch完成AJAX请求
adz41455的博客
11-06 167
使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息，我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息，能使网页实现异步更新。 几年前，初始化Ajax一般使用jQuery的ajax方法： $.ajax('some-url', { success: (data) => { /* do something with the data *...
AJax之Fetch(一)
做一个NB的码农，且不止于码农
01-14 2800
<script> var result = fetch('https://api.github.com') result.then(function(response) { console.log('response', response) console.log('header', response.headers.get('Content-Type'))
fetch(新一代ajax)
学习随笔
04-28 292
是基于的p 基本使用：fetch(url ,{method:'GET'}).then(data => data); fetch(url ,{ method:'POST', headers : new Headers({ "Content-Type" : 'application/x-www-from-urlencoded' }), body : new URLSearchParm...
fetch的用法ajax,如何使用Fetch在JavaScript中进行AJAX调用
weixin_32382353的博客
08-05 171
原标题：如何使用Fetch在JavaScript中进行AJAX调用 在本系列中，我将定期分享有关JavaScript的小知识。我们将介绍JS基础知识，浏览器，DOM，系统设计，域体系结构和框架。Fetch是用于在JavaScript中发出AJAX请求的接口。它由现代浏览器广泛实现，并用于调用API。 调用fetch返回带有响应对象的Promise。如果出现网络错误，则将拒绝访问；如果连接到服务器没...
25_ajax请求_使用fetch
weixin_30599769的博客
04-17 87
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"></div>...
原生Ajax基础教程：创建与发送Ajax请求详解
- **onreadystatechange** 方法会定期检查请求状态，并在`readyState`变为4（请求已完成）时执行回调函数，处理响应数据： ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值