Flask 框架：运用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库实现前后端交互的更多相关文章
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)
Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享) 点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...
- Flask 入门一（ flask 框架和 flask-script 库）
Flask 入门一( flask 框架 和 flask-script 库) 一.Flask框架: 1.简介 Flask是一个非常小的Python Web框架,被称为微型框架:只提供了一个稳健的核心,其 ...
- Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
- Vue前后端交互、生命周期、组件化开发
目录 Vue前后端交互.生命周期.组件化开发 一.Vue用axios与后端交互 二.Vue的生命周期 三.组件化开发 Vue前后端交互.生命周期.组件化开发 一.Vue用axios与后端交互 如果 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- 百度ueditor的图片上传，前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）
这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...
- nodejs实现前后端交互
本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...
随机推荐
- WSL2 配置 ArchLinux 初始化环境
这篇文章针对的是在 Win11 系统的 WSL2 下安装 ArchLinux 系统, 网上很多中文教程都是使用 LxRunOffline 去做的,但是实际上该方法已经过时了,目前有更加先进的ArchW ...
- 通过 Homebrew 在 Mac OS X 上安装和配置 Redis
通过使用 Homebrew,可以大大降低在 Mac OS X 上设置和配置开发环境的成本. 让我们安装 Redis. $ brew install redis 安装后,我们将看到一些有关配置注意事项的 ...
- 阿里云 X 森马 AIGC T恤设计大赛开启! 穿什么由你定，赢Airpods，作品定制联名T恤
"关于宇宙,我所知道的最富诗意的事实之一就是, 我们身体中的每一个原子都曾经存在于某一颗爆发的恒星里. 组成你左手的原子和组成你右手的原子 很有可能来自不同的恒星, 而我们都是恒星的孩子, ...
- 【调试】ftrace(二)新增跟踪点
内核的各个子系统已经有大量的跟踪点,如果这些跟踪点无法满足工作中的需求,可以自己手动添加跟踪点. 添加跟踪点有两种方式,一种是仿照events/目录下的跟踪点,使用TRACE_EVENT() 宏添加. ...
- 如何使用VNC进行远程桌面控制
VNC是一款很实用的可以实现远程桌面控制的小工具,我遇到的有两种情况比较常见,一是有时候时候可能你会外出或离开自己办公室(但可以访问到办公司的网络),而很多资料都保存在办公室的台式机上,这时如果突然有 ...
- sql server主从同步
sql server主从方案介绍 sql server 作为目前主流的数据库,用户遍布世界各地.sql server也有一些比较成熟的主备方案,目前主要有:复制模式(发布-订阅模式).镜像传输模式 ...
- ASP.Net Core 5.0 MVC Session的添加，及它与Cookie的关系
1.在控制器上新增一个方法 public IActionResult SessionAndCookie() { string result = HttpContext.Session.GetStrin ...
- lucene.net全文检索（二）lucene.net 的封装
查询 public class LuceneQuery : ILuceneQuery { #region Identity private Logger logger = new Logger(typ ...
- 小白学标准库之反射 reflect
1. 反射简介 反射是 元编程 概念下的一种形式,它在运行时操作不同类型的对象,检查对象的类型,大小等信息,对于没有源代码的包反射尤其有用. 设想一个场景,读取一个包中变量 a 的类型,并打印该类型的 ...
- 小程序：Now you can provide attr `wx:key` for a `wx:for` to improve performance. 的解决方案
在wx:for后面添加wx:key="key" 可消除警告 <view wx:for="{{thisWeekMovies}}" wx:for-index= ...