Flask框架配合Axios实现前后端JSON数据交互
本文演示如何在前端使用 Axios 库向后端发起 JSON 格式请求，并在 Python Flask 框架中解析请求数据、返回标准 JSON 响应。提供两种 Axios POST 写法及完整的后端路由配置，帮助开发者快速搭建基础的前后端数据交互流程。
前端 Axios 请求发送方式
Axios 是基于 Promise 的 HTTP 客户端，适合替代传统 XHR 进行异步数据通信。以下是两种常用的 POST 请求写法，均可向后端提交 JSON 格式数据：
<!-- 方法一：简洁调用形式 -->
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.data.username);
console.log(response.data.message);
})
.catch(function(error) {
console.error(error);
});
}
<!-- 方法二：配置对象形式 -->
function saveHanderPostB() {
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.data.username);
console.log(response.data.message);
})
.catch(function(error) {
console.error(error);
});
}页面需引入 Axios 脚本（如 <script src="https://cdn.lyshark.com/javascript/axios/0.26.0/axios.min.js"></script>），表单控件绑定对应 ID 后即可触发上述逻辑。
Flask 后端接收与响应处理
Flask 框架通过 request.get_json() 可直接解析前端提交的 JSON 字符串为 Python 字典对象。以下为实现相同路径路由的完整后端逻辑：
from flask import Flask, render_template, request
import json
app = Flask(__name__,
static_url_path='/python',
static_folder='static',
template_folder='templates')
@app.route('/', methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("index.html")
elif request.method == "POST":
val = request.get_json()
# 获取并记录解析后的数据
print(f"收到用户: {val['name']} ---> 年龄: {val['age']}")
# 构造响应数据并返回 JSON 类型
return json.dumps({"username": "lyshark", "message": "hello lyshark"})
if __name__ == "__main__":
app.run(host="127.0.0.1", port=80, debug=False)代码配置了静态资源与模板目录。当客户端发送 POST 请求时，request.get_json() 会自动反序列化载荷；业务处理完毕后，使用 json.dumps() 序列化字典并返回，符合 HTTP 协议标准。
运行验证与数据核对
执行 Python 脚本启动服务后，在浏览器访问配置的端口。输入姓名与年龄后点击提交按钮，观察终端输出与浏览器开发者工具控制台：
终端正常打印提取的参数值，且前端 Promise 链成功捕获到服务端返回的对象，表明数据链路打通。后续可根据实际业务替换 json.dumps 中的固定字段，对接数据库或第三方接口。以上就是使用Axios与Flask实现前后端JSON数据交互的详细内容，更多关于Flask AJAX请求处理的资料请关注本站其它相关文章！
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
