1、Axios发送ajax的GET请求
url参数信息
2、Axios发送ajax的POST请求
url参数：
请求头信息：
3、Axios发送ajax的通用型请求
// 配置baseUrl
axios.defaults.baseURL = 'http://127.0.0.1:8000';
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);
})
}
请求方法、请求参数 、请求url
请求头信息：
response响应：
axos.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.24.0/axios.js"></script>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<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',{
// url 参数
params: {
id: 100,
vip: 7
},
// 请求头信息
headers: {
name:'zhangsan',
age:20
}
}).then(value =>{
console.log(value);
})
}
btns[1].onclick = function(){
// POST请求
axios.post('/axios-server',{
username:'admin',
password:'admin'
},{
// url 参数
params: {
id: 100,
vip: 7
},
// 请求头信息
headers: {
height: 180,
weight:120
}
})
}
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、创建路由规则
// request 是对请求报文的封装
// response 是对相应报文的封装
//axios AJAX 服务
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:'zhangsan'};
response.send(JSON.stringify(data));
});
// 4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})
