Flask 通过Axios库前后端交互

原创已于 2023-11-28 10:06:19 修改 · 1.6w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flask #交互 #python #后端 #开发语言

于 2022-03-15 16:52:00 首次发布

《Python 编程技术实践》专栏收录该内容

154 篇文章

订阅专栏

本文展示了如何使用前端库Axios向后端发送POST请求，以JSON格式传递数据。前端通过获取表单输入，利用Axios两种不同的调用方式提交数据到Flask应用。后端接收到数据后进行处理，并返回JSON响应。这个过程涉及到Promise的使用和Flask的路由及请求处理。

Axios 是一个基于promise的HTTP库，该库是一个更好的替代ajax向后端发送数据或请求数据的前端组件库，其本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，如下案例运用axios向后端提交JSON字符串，后端通过Flask响应请求并处理。

前端发送数据的第一种方式。

<head>
    <script src="https://www.lyshark.com/javascript/axios/0.26.0/axios.min.js"></script>
</head>
<body>
<input type="text" name="name" id="name" />
<input type="text" name="age" id="age" />
<button onclick="saveHanderPost()" >提交</button>

<script type="text/javascript">

    function saveHanderPost()
    {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;

        axios.post("/",{
            name:name,
            age:age
        })
        .then(function(response){
            console.log(response);
            console.log(response.data.username);
            console.log(response.data.message);
        })

        .catch(function(error){
            console.log(error);
        })
    }
</script>

前端发送数据的第二种方式。

<script type="text/javascript">

    function saveHanderPost()
    {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        
        axios({
            url: "/",
            method: "post",
            data: {
                name: name,
                age:age
            },
            responseType: "text/json",
        })
        .then(function(response){
            console.log(response);
            console.log(response.data.username);
            console.log(response.data.message);
        })
        .catch(function(error){
            console.log(error);
        })
    }
</script>

Python后端使用Flask接收并处理前端发送过来的JSON字符串。

from flask import Flask
from flask import render_template,request
import json

app = Flask(__name__)

@app.route('/',methods=['GET','POST'])
def hello_world():
    if request.method == "GET":
        return render_template("index.html")

    elif request.method == "POST":
        val = request.get_json()
        print("收到用户: {} ---> 年龄: {}".format(val["name"],val["age"]))

        # 返回JSON类型
        return json.dumps({"username": "lyshark","message": "hello lyshark"})

if __name__ == '__main__':
    app.run()