vue的ajax请求
一般前端与后端需要进行数据交互，这时候会用到ajax
vue的数据与后端进行交互的ajax方式有：
- 原生js的ajax（不常用）
- jquery封装的ajax（不常用）
- H5自带的fetch （可能用）
- vue的axios（Vue作者推荐用）
原生js的ajax
因为写起来太麻烦，还得自己封装，一般不用，因此作为了解丰富自己的前端知识还是可以看看的
代码如下：
<!DOCTYPE html>
<html>
<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>
</head>
<body>
</body>
<script>
/* ajax */
//post数据传递，一般需要接口文档，自己用node写也是可以的
//创建ajax
var xhr = new XMLHttpRequest;
//请求地址
xhr.open('post', 'url');
//请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
//因为ajax异步send还是写这里比较好
xhr.send('name=zhangsan&age=18')
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status>=200 && xhr.status<300){
var res = xhr.responseText;
console.log(res);
}
}
}
</script>
</html>
jquery封装的ajax
因为jquery有比较完整的ajax封装，但它主要是操作DOM和Bom，所以一般也不怎么用，作为拓展吧
代码如下：
<!DOCTYPE html>
<html>
<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">
<!-- bootcdn的镜像也可以自己下载jquery库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
</head>
<body>
</body>
<script>
/* jquery */
$.ajax({
method:'post',
url:'url',
// // dataType:"",
data:{
name:'zhangsan',
age:18
},
success:res=>{
console.log(res);
},
// // error:err=>{
// // }
})
</script>
</html>
H5自带的fetch
H5自带的fetch封装的ajax也是比较好的，现在市面上还有些公司在用
代码如下：
<!DOCTYPE html>
<html>
<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>
</head>
<body>
</body>
<script>
/* fetch */
//get，返回值是对象所以需要调用then()方法，调用出来
fetch('url?name=zhangsan&age=18').then(res=>res.text()).then(res=>{
console.log(res);
})
//post，body里还是不能用对象
fetch('url',{
method:'post',
body:'name=zhangsan&age=14',
headers: {
"content-type": 'application/x-www-form-urlencoded'
}
//转json数据格式
}).then(res=>res.json()).then(res=>{
console.log(res);
})
</script>
</html>
vue的axios
主要使用的数据请求方式，因为作者推荐，作者都推荐了嘛，最后还得是看公司，没要求最好还是axios
使用需要下载axios插件，使用方法详见官网：axios官网
代码如下：
<!DOCTYPE html>
<html>
<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>
</head>
<body>
</body>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
/* axios */
//设置全局令牌，发送请求就不用特地带令牌了
axios.defaults.headers['authorization'] = 'token'
//get，可以设置全局地址提高代码复用率，减少自己写代码，就不用每个都写这么长的地址，嘿嘿
axios.defaults.baseURL='url'
axios.get('third', {
params: {
name: 'lisi',
age: 20
}
}).then(res => {
console.log(res.data);
})
//post
axios.post('/fourth', 'name=a&age=12').then(res => {
console.log(res);
})
</script>
</html>
