Flask框架运用Axios库实现前后端交互详解

Axios 是一个基于promise的HTTP库，该库是一个更好的替代ajax向后端发送数据或请求数据的前端组件库。本文通过示例为大家介绍了如何运用Axios库实现前后端交互，感兴趣的可以了解一下

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

前端运用Axios发送数据的两种方式。

  LyShark

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

from flask import Flask,render_template,request import json app = Flask(import_name=__name__, static_url_path='/python',   # 配置静态文件的访问url前缀 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("收到用户: {} ---> 年龄: {}".format(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)

运行后提交数据前后端均可接收到数据：