<!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.24.0/axios.js"></script>
</head>
<body>
<button>get </button>
<button>post </button>
<button>通用请求</button>
<script>
var btns = document.getElementsByTagName("button")
//配置baseURL
axios.defaults.baseURL="http://127.0.0.1:7000";
btns[0].onclick=function(){
axios.get("/08-axios-ajax",{
//url参数
params:{
id:101,
aaa:'xxx'
},
//请求头信息
headers:{
name:'admin',
age:20
}
}).then(function(value){
console.log(value);
console.log(value.data);
})
}
//then代表成功回调
btns[1].onclick=function(){
axios.post("/08-axios-ajax",{
//url参数
params:{
id:101,
aaa:'xxx'
},
//请求头信息
Headers:{
name:'admin',
age:20
}
}).then(function(value){
console.log(value);
console.log(value.data);
})
}
btns[2].onclick=function(){
axios({
//请求方法
method:"post",
//url
url:"/08-axios-ajax",
//url参数
params:{
id:102,
aaa:'yyy'
},
Headers:{
name:{aaa:'aaa'},
age:20
},
//请求体信息
data:{
username:'admin',
password:'123456'
}
}).then(function(response){
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
}).catch(function(e){
console.log(e);
})
}
</script>
</body>
</html>
var express = require("express")
var app = express()
app.all("/08-axios-ajax",function(request,response){
response.setHeader("Access-Control-Allow-Origin","*")
response.setHeader("Access-Control-Allow-Headers","*")
var data =JSON.stringify({name:"马德里甜心"})
response.send(data);
})
app.all("/fetch-ajax",function(request,response){
response.setHeader("Access-Control-Allow-Origin","*")
response.setHeader("Access-Control-Allow-Headers","*")
var data =JSON.stringify({name:"马德里甜心"})
response.send(data);
})
app.listen(7000,function(){
console.log("郭子的服务器已经启动");
})
注意每写完都要在后端启动服务器，保证html页面能顺利和后端中js代码联动。
代码大致意思是：在主页面前端设置三个按钮，分别代表get，post，与axios的方法，设置参数，回调成功或失败的函数，这三个方法大致都差不多，最常用的是axios方法。也有jquery的，fetch的，但是最常用的是axios哈，也就是我设置的点击第三个按钮之后的功能。在Network中可以查看我们自定义 设置的请求头和请求体的信息。以确保设置成功。
js代码中JSON.stringify方法是把数组转为字符串
欢迎大家一起讨论
|