提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Flask框架：Axios库实现前后端交互

框架 实现 交互 Flask 前后 Axios
2023-09-14 09:13:21 时间

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

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

<head>
    <script src="https://cdn.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()

相关文章