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. 在Windows下配置Clang编译器

    Preferences Linux & macOS 平台LLVM 相关工具链下载 2019年,在Windows下配置Clang编译器 Visual Studio 2022 中使用 Clang ...

  2. 【每日一题】15.Xorto （前缀和枚举）

    补题链接:Here 题意:选取任意不重叠的两个区间,使异或结果为 \(0\) 样例:\(1,2,3,4,5,5\) 在样例中我们可以选取 \(1,2,3\) 和 \(5,5\) 就是满足题意 思路:相 ...

  3. 一篇文章教你从入门到精通 Google 指纹验证功能

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EHomjBy4Tvm8u962J6ZgsA作者:Sun Daxiang Google 从 An ...

  4. Spring七种事务传播行为与五种事务隔离级别

    一.事务的传播行为:通过Propagation定义: <!-- 配置事务通知 --><tx:advice id="txAdvice" transaction-ma ...

  5. <vue 组件 3、父子组件相互访问>

    代码结构 一.     01-组件访问-父访问子 1. 效果 点击后在父组件里展示子组件的参数 2.代码 01-组件访问-父访问子.html <!DOCTYPE html> <htm ...

  6. DDD领域驱动设计 (C# 整理自“老张的哲学”)

    大话DDD领域驱动设计 概念 Domain Driven Design 领域驱动设计 第一个D(Domain): 领域:指围绕业务为核心而划分的实体模块. 第二个D(Driven): 驱动:这里的驱动 ...

  7. 接口自动化复习第四天利用正则和faker提取替换变量值

    在做接口自动化测试的时候,我们经常会遇到,有些字段利用随机生成数据就行了,不需要自己去构造测试数据.今天我就是要python中的第三方库faker来构造随机数,其次使用正则表达式来提取变量. 首先在接 ...

  8. Go socket 编程源码解析(上)

    0. socket 介绍 Liunx 中一切皆文件.通过文件描述符和系统调用号可以实现对任何设备的访问.同样的,socket 也是一种文件描述符.通过 socket 可以建立网络传输.对于 TCP 和 ...

  9. [转帖]TiDB 数据库核心原理与架构 [TiDB v6]（101）笔记

    https://www.jianshu.com/p/01e49a93f671 description: "本课程专为将在工作中使用 TiDB 数据库的开发人员.DBA 和架构师设计. 本门课 ...

  10. [转帖]tidb关闭sql_mode=ONLY_FULL_GROUP_BY模式

    报错: 1 of ORDER BY clause is not in SELECT list, references column 'xxx' which is not in SELECT list ...