脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → python → Flask Axios前后端交互

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前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • TF-IDF与余弦相似性的应用（一） 自动提取关键词

    TF-IDF与余弦相似性的应用（一） 自动提取关键词

    这篇文章主要为大家详细介绍了TF-IDF与余弦相似性的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • python监控linux内存并写入mongodb（推荐）

    python监控linux内存并写入mongodb（推荐）

    这篇文章主要介绍了python监控linux内存并写入mongodb的相关资料,需要的朋友可以参考下
    2017-09-09
  • Python正则表达式中flags参数的实例详解

    Python正则表达式中flags参数的实例详解

    正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,下面这篇文章主要给大家介绍了关于Python正则表达式中flags参数的相关资料,需要的朋友可以参考下
    2022-04-04
  • anaconda打开闪退的解决过程

    anaconda打开闪退的解决过程

    这篇文章主要给大家介绍了关于anaconda打开闪退的解决过程,文中通过实例代码介绍的非常详细,对大家学习或者使用anaconda具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • python字符串下标与切片及使用方法

    python字符串下标与切片及使用方法

    这篇文章主要介绍了python字符串下标与切片及使用方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • python传到前端的数据,双引号被转义的问题

    python传到前端的数据,双引号被转义的问题

    这篇文章主要介绍了python传到前端的数据,双引号被转义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-04-04
  • python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解

    python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解

    这篇文章主要介绍了python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • odoo字段访问控制的操作方法

    odoo字段访问控制的操作方法

    在 Odoo 中,可以通过几种方式实现字段的访问控制ÿ0c;包括通过模型安全规则、记录规则和字段属性来限制字段的访问,这篇文章主要介绍了odoo字段访问控制的相关操作,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Python批量修改文件后缀的方法

    Python批量修改文件后缀的方法

    这篇文章主要介绍了Python批量修改文件后缀的方法，有需要的朋友可以参考一下
    2014-01-01
  • 跟老齐学Python之不要红头文件(2)

    跟老齐学Python之不要红头文件(2)

    在前面学习了基本的打开和建立文件之后，就可以对文件进行多种多样的操作了。请看官要注意，文件，不是什么特别的东西，就是一个对象，如同对待此前学习过的字符串、列表等一样。
    2014-09-09

最新评论