Flask 框架：运用Ajax实现数据交互
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载刷新整个页面，这使得程序能够更快地回应用户的操作，如下笔记将简单介绍使用AJAX如何实现前后端数据通信。
前后端发送字符串
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
$.ajax({
url:"/",
contentType: "POST",
data:{"head":"hello lyshark"},
success:function(data){
if(data=="1"){
alert("请求已经提交.");
}
},
error:function(){
alert("执行失败了...")
}
});
}
</script>
<form action="/" method="post">
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>
Flask后端代码
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 == "POST":
# 接收数据
token = request.headers.get("Authorization")
json_value = request.get_json()
print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")
# 发送数据
info = dict()
info["status"] = "success"
info["page"] = "/test/lyshark"
return jsonify(info)
else:
return render_template("index.html")
if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)
前后端发送JSON数据
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function SendAjax()
{
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
$.ajax({
url:"/",
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
headers: {"Authorization": "1a2cEFgh"}, <!--此处携带token-->
data: JSON.stringify({"username":username,"password":password}), <!--此处携带JSON-->
success:function(result)
{
console.log("状态码: " + result.status + " 页面: " + result.page);
},
error:function()
{
console.log("执行失败了");
}
});
}
</script>
<!--提交数据-->
<form action="/" method="post">
用户账号: <input type="text" placeholder="用户账号" name="username" /><br><br>
用户密码: <input type="text" placeholder="用户密码" name="password" /><br><br>
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>
Flask后端代码
from flask import Flask,render_template,request
from flask import jsonify
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 == "POST":
# 接收数据
token = request.headers.get("Authorization")
json_value = request.get_json()
print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")
# 发送数据
info = dict()
info["status"] = "success"
info["page"] = "/route/lyshark"
return jsonify(info)
else:
return render_template("index.html")
if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)
发送数据并携带token
前端代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function SendAjax(){
var token = $('input[name="token"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
headers:{"Authorization":token}, <!--此处携带token-->
success:function(result){
alert("执行成功...");
},
error:function(){
alert("执行失败了...");
}
});
}
</script>
<!--提交数据-->
<form action="/dataFromAjax" method="post">
设置token: <input type="text" placeholder="用户账号" name="token" /><br>
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>
Flask后台部分
from flask import Flask,render_template,request
from flask import jsonify
app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=['POST'])
def recv():
token = request.headers.get("Authorization")
print(token)
return render_template("index.html")
if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)
收发JSON格式字符串
前端部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function GetAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "GET",
success:function(data){
alert("姓名: " + data.name + "年龄: " + data.age);
},
error:function(){
alert("执行失败了...")
}
});
}
</script>
<!--提交数据-->
<input type="button" class="MyButton" value="接收数据" onclick="GetAjax()">
</body>
</html>
Flask后端部分
from flask import Flask,render_template,request
from flask import jsonify
app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹
@app.route("/")
def index():
return render_template("index.html")
@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
info = dict()
info['name'] = "lyshark"
info['age'] = 22
return jsonify(info)
if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)
Flask 框架：运用Ajax实现数据交互的更多相关文章
- MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...
- $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互
一.ajax 1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json 2 ajax干啥用的?前后端做数据交互: 3 之前学的跟后台做交互的方式: -第一种:在浏览器 ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- 基于ssh框架的highcharts前后台数据交互实例
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
- AJAX进行数据交互的过程
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML). 是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务 ...
- laytpl模板——怎么使用ajax与数据交互
第一次在项目中用laytpl模板,下面是一些使用过程中的探索,希望对小伙伴们有所帮助. 注:第一次使用这个模板的小伙伴建议先去看看官网 laytpl <script type="tex ...
- springmvc使用ajax进行数据交互时，session失效问题（@ResponseBody与session能否同时使用？）
今天做博客demo的时候遇到了这样的问题:当我用ajax进行资源请求时,需要顺便将账户信息存入session.但是后来发现有@Responsebody标签时,直接用HttpSession存数据时,根本 ...
- Vue--- Vue（Pubsub + Ajax） 数据交互
案例知识点 兄弟组件儿的通信 使用了Pubsub 订阅与发布 ajax数据请求 获取前 获取中 获取后 获取为空 获取异常 获取成功后显示数据给到 原先定义号的 ...
- flask框架下读取mysql数据 转换成json格式API
研究了一天 因为需要从数据库拿数据然后转换成json的格式 expose出去为 API 发现一条数据是容易,两条以上我居然搞了这么久 好歹出来了 先贴一下 后面更新 mysql的操作 比较容易了htt ...
- Python的Flask框架使用Redis做数据缓存的配置方法
flask配置redis 首先得下载flask的缓存插件Flask-Cache,使用pip下载. sudo pip install flask_cache 为应用扩展flask_cache app ...
随机推荐
- 安装vue脚手架@vue/cli 4.5.13(稳定版)
若 NPM 下载过慢,请参考本处改换镜像源:Here 首先新建一个 vue 测试项目,还记得以前自己是用 vue-cli 2.0的版本 去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小 ...
- Codeforces 670C （离散化入门题）
原题链接:https://codeforces.com/problemset/problem/670/C 题目大意: 有 n 个人,每人会且仅会一种语言. (n ≤ 2e5) 语言有各自的编号(≤ 1 ...
- linux有用的命令
如下是一些在工作中偶尔会用到,每次用的时候都要查一查资料的命令这里总结一下方便今后查阅 0.查看操作系统版本 cat /etc/issue 或 cat /etc/redhat-release 1.后 ...
- 【内核】深入分析内核panic(一)--内核问题的原因
1 概述 linux内核包括进程管理.内存管理.中断管理.设备驱动.同步机制等各种模块,它们共同运行在一个共享的地址空间中,因此在运行中一旦出现问题,彼此之间可能具有千丝万缕的联系. 而且与用户态不同 ...
- java项目实践-请求转发以及重定向-day18
目录 1. 中文乱码问题 2. 请求的转发servlet 3. 登录后的重定向 4 总结 1. 中文乱码问题 创建一个工程secondweb 添加jar包依赖 new servlet web.xml添 ...
- 每天学五分钟 Liunx 1000 | 软件篇：源码安装
软件安装流程 前面软件篇提到了通过 RPM 和 YUM 在线安装的机制安装软件,除了这两种方式之外还有一种通过源码来安装软件的方式.
- Oracle官网下载软件需要登录Oracle账户问题
问题描述 当我们在Oracle官网上下载JDK时,(JDK下载地址)系统会提示需要登录Oracle账户.对于没有Oracle账户的人来说,注册账户太繁琐. 没有账户怎么办??? 此处推荐一个靠谱的网站 ...
- 【MACRO】嵌入式实用的宏技巧 DEBUG-printf 、 #/##
from: C语言.嵌入式中几个非常实用的宏技巧 (qq.com) 宏打印函数 在我们的嵌入式开发中,使用printf打印一些信息是一种常用的调试手段.但是,在打印的信息量比较多的时候,就比较难知道哪 ...
- linux-网络状态-netstat
- 幻兽帕鲁 Palworld 私有服务器一键部署教程
<幻兽帕鲁>(日语:パルワールド,英语:Palworld) 是由日本开发商 Pocket Pair 推出的一款动作冒险生存游戏.游戏设定在一个由类似动物的生物 "帕鲁" ...