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库实现前后端交互的更多相关文章

  1. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

  2. Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)

    Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享)  点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...

  3. Flask 入门一（ flask 框架和 flask-script 库）

    Flask 入门一( flask 框架 和 flask-script 库) 一.Flask框架: 1.简介 Flask是一个非常小的Python Web框架,被称为微型框架:只提供了一个稳健的核心,其 ...

  4. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  5. Vue前后端交互、生命周期、组件化开发

    目录 Vue前后端交互.生命周期.组件化开发 一.Vue用axios与后端交互 二.Vue的生命周期 三.组件化开发 Vue前后端交互.生命周期.组件化开发 一.Vue用axios与后端交互 ​ 如果 ...

  6. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  7. 百度ueditor的图片上传，前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  8. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  9. 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

  10. nodejs实现前后端交互

    本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...

随机推荐

  1. C#开源跨平台的多功能Steam工具箱&GitHub加速神器

    前言 作为一个程序员你是否会经常会遇到GitHub无法访问(如下无法访问图片),或者是访问和下载源码时十分缓慢就像乌龟爬行一般.今天分享一款C#开源的.跨平台的多功能Steam工具箱和GitHub加速 ...

  2. VueTreeselect

    https://www.vue-treeselect.cn/ 官网简介

  3. 实现不限层级的Element的NavMenu

    做管理后台开发的时候,需要用到Element的NavMenu组件,于是乎,翻开文档,大致是这样实现的. <el-menu> <el-menu-item index="1&q ...

  4. C#设计模式05——抽象工厂的写法

    C# 抽象工厂是一种创建型设计模式,它提供了一种封装一组相关或相互依赖对象创建的方法.该模式使得客户端能够创建与应用程序所使用的特定工厂无关的对象. 以下是C#抽象工厂5W1H的解释: 1. What ...

  5. Nginx Location 深入剖析及动静分离简易配置

    本文为博主原创,未经允许不得转载: 1. location 使用分析 location 是 Nginx 配置 中的一个指令,用于访问的 URL 匹配,而在这个 location 中所配置的每个指令将会 ...

  6. spring启动流程 (3) BeanDefinition详解

    BeanDefinition在Spring初始化阶段保存Bean的元数据信息,包括Class名称.Scope.构造方法参数.属性值等信息,本文将介绍一下BeanDefinition接口.重要的实现类, ...

  7. 08-逻辑仿真工具VCS-mismatch

    逻辑仿真工具VCS mismatch,预计的仿真结果和实际仿真结果不同,寻找原因? 首先考虑代码,,不要让代码跑到工具的盲区中 其次考虑仿真工具的问题 +race -- 将竞争冒险的情况写到文件中 不 ...

  8. [转帖]AES算法（五）GCM工作模式

    https://zhuanlan.zhihu.com/p/376692295 在以前介绍的基本工作模式中,ECB.CFB.OFB 三种模式可以解决 ECB 模式中相同明文生成相同密文的缺陷,CTR 又 ...

  9. [转帖]How to Resolve ORA-3136 Inbound Connection Timed Out

    https://logic.edchen.org/how-to-resolve-ora-3136-inbound-connection-timed-out/#:~:text=ORA-03136%3A% ...

  10. [转帖]存储器分级：L1 Cache 比内存和 SSD 快多少倍？

    目录 1.为什么会有存储器分级策略? 2.存储器分级策略 2.1 存储器的级别 2.2.1 L1-Cache 2.2.2 L2-Cache 2.2.3 L3-Cache 3.内存 4.SSD 和硬盘 ...