【补充】前后端交互的三种方式

【补充】前后端交互的三种方式

  • 前后端要打通----》从前端发送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>
posted @ 2023-08-06 22:31  Chimengmeng  阅读(130)  评论(0)  编辑  收藏  举报