Flask 通过Axios库前后端交互_flask框架前后端传字符串

作者：繁依Fanyi0 | 2024-02-07 17:21:17

踩

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()

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/66556