Flask框架运用Axios库实现前后端交互详解
更新时间：2022年12月22日 15:11:17 作者：LyShark
Axios 是一个基于promise的HTTP库，该库是一个更好的替代ajax向后端发送数据或请求数据的前端组件库。本文通过示例为大家介绍了如何运用Axios库实现前后端交互，感兴趣的可以了解一下
Axios 是一个基于promise的HTTP库，该库是一个更好的替代ajax向后端发送数据或请求数据的前端组件库，其本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，如下案例运用axios向后端提交JSON字符串，后端通过Flask响应请求并处理。
前端运用Axios发送数据的两种方式。
<html>
<head>
<meta charset="UTF-8">
<title>LyShark</title>
<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>
</body>
<!-- 第一种发送方法 -->
<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 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);
console.log(response.data.username);
console.log(response.data.message);
})
.catch(function(error){
console.log(error);
})
}
</script>
</html>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)
运行后提交数据前后端均可接收到数据：
到此这篇关于Flask框架运用Axios库实现前后端交互详解的文章就介绍到这了,更多相关Flask Axios前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Python 2.6.6升级到Python2.7.15的详细步骤
这篇文章主要介绍了Python 2.6.6升级到Python2.7.15的详细步骤,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
@property装饰器能把一个方法变成属性一样来调用,下面我们就一起来看看Python黑魔法@property装饰器的使用技巧解析2016-06-06
这篇文章主要介绍了Python中logging模块的用法实例,以实例形式介绍了日志模块logging的用法,具有一定的实用价值,需要的朋友可以参考下2014-09-09
这篇文章主要f Java SE 面向对象编程的3个常用接口,Comparable、Comparator 比较器、Cloneable，下面文章详细介绍，需要的小伙伴可以参考一下2022-01-01
这篇文章主要介绍了Python list与NumPy array 区分详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了pytorch tensor合并与分割方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
在本篇文章里小编给大家整理的是一篇关于python字典的元素访问实例详解内容，有需要的朋友们可以跟着学习参考下。2021-07-07
这篇文章主要为大家介绍了Python异常处理之常见异常类型绝佳实践详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段,下面这篇文章主要给大家介绍了关于python语法教程之def()函数定义及用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了python 包之 multiprocessing 多进程，首先创建一个进程。实例化 Process 类创建一个进程对象、然后调用它的 start 方法即可生成一个子进程，下文更多相关资料,需要的朋友可以参考一下2022-04-04
最新评论