axios简介
axios是一个前端Ajax的一个工具库。
axios资源 https://github.com/axios/axios
axios的引入：<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
请求格式
get请求
axios.get('url地址',{
属性名:属性值
})
eg:
axios.get('http://127.0.0.1:8000/axios-server',{
// 参数：
params:{
id:100,
vip:7
},
// 请求头
headers:{
name:'yang',
age:20
}
}).then(value =>{
// 响应体结果
console.log(value)
})
post请求
和get请求格式一样，但是他有请求体，放在post的第二个参数。
eg：
btns[1].onclick =function(){
// get请求
axios.post('/axios-server',
{
// 请求体
username:'admin',
password:'admin'
},{
// 参数：
params:{
id:200,
vip:9
},
// 请求头
headers:{
heigth:200,
width:200
}
})
}
ajax请求（通用请求，既可post也可get）
格式：
axios({
参数名：参数值
})
eg：
btns[2].onclick = function (){
axios({
// 请求方法：
method:'POST',
// url
url:'/axios-server',
// 参数
params:{
vip:10,
level:30
},
// 请求头
headers:{
heigth:200,
width:200
},
// 请求体
data:{
username:'admin',
password:'admin'
}
}).then(response=>{
// console.log(response)
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
}
所有代码
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>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">jQuery发送AJAX请求</h2>
<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法ajax</button>
</div>
<script>
const btns =document.querySelectorAll('button')
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick =function(){
// get请求
axios.get('/axios-server',{
// 参数：
params:{
id:100,
vip:7
},
// 请求头
headers:{
name:'yang',
// age:20
}
}).then(value =>{
// 响应体结果
console.log(value)
})
}
btns[1].onclick =function(){
// get请求
axios.post('/axios-server',
{
// 请求体
username:'admin',
password:'admin'
},{
// 参数：
params:{
id:200,
vip:9
},
// 请求头
headers:{
heigth:200,
width:200
}
})
}
btns[2].onclick = function (){
axios({
// 请求方法：
method:'POST',
// url
url:'/axios-server',
// 参数
params:{
vip:10,
level:30
},
// 请求头
headers:{
heigth:200,
width:200
},
// 请求体
data:{
username:'admin',
password:'admin'
}
}).then(response=>{
// console.log(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.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头(接受所有响应头信息)
response.setHeader('Access-Control-Allow-Headers','*')
// 设置响应体
response.send('HELLO AJAX POST')
})
app.all('/json-server', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头(接受所有响应头信息)
response.setHeader('Access-Control-Allow-Headers', '*');
// 响应数据
const data = {
name: 'yang',
// age:18
}
// 数据类型转化
let str = JSON.stringify(data);
// 设置响应体
response.send(str)
})
// IE缓存
app.get('/IE', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头(接受所有响应头信息)
response.setHeader('Access-Control-Allow-Headers', '*');
// 设置响应体
response.send('HELLO IE -- 3')
})
// 延时
app.all('/delay', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(()=>{
response.send('延时响应')
},3000)
})
// jQuery服务
app.all('/jquery-server', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers','*')
const data = {
name:'yang'}
response.send(JSON.stringify(data));
})
// Anxios服务
app.all('/axios-server', (request, response) => {
// 设置响应头 设置允许跨越
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头(接受所有响应头信息)
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {
name:'yang'}
response.send(JSON.stringify(data));
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动，8000端口监听中……')
})