与后端交互的三种方式
前后端需要打通 -----》从前端发送ajax-----》ajax的核心：使用js发送http请求，接收返回
- 原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑（基本不写）
- jq，写了个兼容所有浏览器的 $.ajax()，不仅仅有ajax，还封装了很多dom操作
-如果vue中使用它，不合适
- axios：第三方的ajax包（我们使用这个）
- fetch：原生js发送ajax请求，有的浏览器也不兼容
1. 使用jquery发送ajax请求：
会出现的问题：
解决跨域问题，在请求头中：
views：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<button class="btn btn-success" @click="handleLoad">点我添加数据</button>
<hr>
姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
// 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
// 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
// 定义一个新的变量来接受this，防止在内部函数调用的时候，出现指向错乱的问题
var _this=this
// ajax请求方式，jquery的ajax
$.ajax({
// 请求的地址
url: 'http://127.0.0.1:8000/user/',
// 请求的方式
type: 'get',
success: function (res) {
// res是object类型
console.log(typeof res)
// 拿到后端的数据
_this.name = res.name
_this.age = res.age
}
})
}
}
})
</script>
</html>
结果：
2. 使用fetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<button class="btn btn-success" @click="handleLoad">点我添加数据</button>
<hr>
姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
// 使用js的原生fetch(目前也不用）
handleLoad() {
var _this=this
fetch('http://127.0.0.1:8000/user/').then(function (response) {
// 将数据转为json类型
return response.json();
}).then(function (res) {
console.log(res); // 对象类型
_this.name=res.name
_this.age=res.age
})
// 箭头函数
// var _this = this
// fetch('http://127.0.0.1:8000/user/').then(response => response.json()).then(res => _this.name= res.name)
}
}
})
</script>
</html>
结果：
3. 使用axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button class="btn btn-success" @click="handleLoad">点我添加数据</button>
<hr>
姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
//var _this=this
//axios.get('http://127.0.0.1:8000/user/').then(function (res) {
// 数据在data中
// console.log(res.data)
// _this.name=res.data.name
//_this.age=res.data.age
//})
// 使用箭头函数
axios.get('http://127.0.0.1:8000/user/').then(res =>{
console.log(res.data)
this.name=res.data.name
this.age=res.data.age
})
}
}
})
</script>
</html>
结果：
使用匿名函数：
使用箭头函数：
箭头函数
箭头函数是es6的语法：
-1. 函数写法变简单
- 2. 箭头函数没有自己的this，在箭头函数中使用this，就是它的上一层的this（不需要新定义一个变量来接受this）
1. 无参数，无返回值
2. 有一个参数，没返回值，括号可以省略
结果：
3. 多个参数，不能省略括号
结果：
4. 多个参数，一个返回值，不能省略括号
结果：
5. 一个参数，一个返回值
结果：
显示电影小案例
标签：Vue,name,res,age,data,箭头,ajax,交互 From： https://www.cnblogs.com/Lucky-Hua/p/17713991.html