标签：username __ 请求 res age 前后 data 三种 交互
【补充】前后端交互的三种方式
- 前后端要打通----》从前端发送ajax---》核心：使用js发送http请求，接收返回
- 使用原生 JavaScript 发送 Ajax 请求
- 这是一种传统的方式，通过使用 JavaScript 的 XMLHttpRequest 对象来发送和接收数据。
- 开发者需要手动处理请求和响应的各个阶段，包括请求参数的拼装、请求头的设置、监听响应事件等。
- 尽管这种方法具有灵活性，但是编写和维护复杂度较高，需要考虑不同浏览器的兼容性问题。
- 使用 jQuery 的 Ajax 方法
- jQuery 提供了方便的
$.ajax() 方法，封装了原生的 XMLHttpRequest 对象，简化了开发者的操作流程。
- 它支持跨浏览器兼容性，并提供了丰富的功能选项，如设置请求类型、请求头、处理错误等。
- 然而，由于现代前端框架（如 Vue.js）一般不推荐使用 jQuery，因此在与这些框架结合使用时可能不太适合。
- 使用第三方库（如 Axios 或 Fetch）
- 第三方库如 Axios 和 Fetch 提供更简洁、易用且功能强大的方式来发送 Ajax 请求。
- 它们以 Promise 或 async/await 为基础，使得异步请求代码更加清晰和易于维护。
- Axios 是一个流行的第三方库，广泛应用于前端项目中。
- 同时，原生的 Fetch API 也是一种现代的标准方式，但需要注意兼容性问题
- fetch： 原生js发送ajax请求，有的浏览器也不兼容
【1】使用jQuery的Ajax
# flask框架构建后端入口
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/')
def index():
res = jsonify({"username": 'dream', "age": 20})
# 前后端分离后，一定会出跨域---》后面要解决的重点
# 在响应头中加入：Access-Control-Allow-Origin ，就就可以解决跨域
res.headers = {'Access-Control-Allow-Origin': '*'}
return res
if __name__ == '__main__':
app.run()
<body>
<div id="app">
<button @click="load">点我加载数据</button>
<br>
姓名::>>{{username}}
<br>
年龄::>>{{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: "",
age: "",
},
methods: {
load() {
// （1）后端交互方式一 ： jQuery的Ajax
// 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
// 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
var _this = this
$.ajax({
url: 'http://127.0.0.1:5000',
type: 'get',
success: function (data) {
data = JSON.parse(data)
_this.username = data.username
_this.age = data.age
}
})
},
}
})
</script>
【2】使用JS原生的fetch
<body>
<div id="app">
<button @click="load">点我加载数据</button>
<br>
姓名::>>{{username}}
<br>
年龄::>>{{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: "",
age: "",
},
methods: {
load() {
// 2 使用js原生的fetch(目前也不用)
// fetch('http://127.0.0.1:5000').then(function (response) {
// // console.log(response)
// return response.json();
// }).then(function (res) {
// console.log(res);
// });
fetch('http://127.0.0.1:5000').then(res => res.json()).then(res => {
console.log(res)
})
}
}
})
</script>
【3】使用axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Vue 的 JS 文件 -->
<script src="vue.min.js"></script>
<!-- CDN 链接 引入方法 -->
<!-- jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js">//jQuery</script>
<!-- Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 的 JS 文件 (动画效果需要jQuery) -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
<!-- Vue 文件 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>-->
<!-- axios 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
<!-- 以下为 css样式书写区 -->
<style>
</style>
</head>
<body>
<div id="app">
<button @click="load">点我加载数据</button>
<br>
姓名::>>{{username}}
<br>
年龄::>>{{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: "",
age: "",
},
methods: {
load() {
// 使用axios(以后用这个)
var _this = this
axios.get('http://127.0.0.1:5000').then(function (res) {
console.log(res.data)
_this.username = res.data.username
_this.age = res.data.age
})
}
}
})
</script>
</html>
标签：username,
__,
请求,
res,
age,
前后,
data,
三种,
交互
From： https://www.cnblogs.com/dream-ze/p/17610262.html