Flask框架运用Ajax实现数据交互的示例代码
作者：lyshark 发布时间：2023-11-19 19:15:19
标签：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)
来源：https://www.cnblogs.com/LyShark/p/15670635.html
0
投稿猜你喜欢
- ①.页面文件使用正确的编码，gb2312使用ANSI，utf-8使用utf-8； ②.ASP代码中设置正确的CODEPAGE，gb2312使
- 此系列意在记录于一些有趣的程序及对其的总结。问题来源：https://github.com/Yixiaohan/show-me-the-co
一、pip简介Pip 是安装python包的工具，提供了安装包，列出已经安装的包，升级包以及卸载包的功能。Pip 是对easy_instal- 外部数据导入导入excel文件pandas导入excel用read_excel()方法：import pandas as pdexcel_f
- JAN-1(January) FEB-2(February) MAR-3(March)APR-4(April) MAY-5(Ma
- 本文实例为大家分享了python版DDOS攻击脚本，供大家参考，具体内容如下于是就找到了我之前收藏的一篇python的文章，是关于ddos攻
- 普通MySQL运行，数据量和访问量不大的话，是足够快的，但是当数据量和访问量剧增的时候，那么就会明显发现MySQL很慢，甚至do
- 1.进入官网https://www.python.org/，点击Downloads下的Windows按钮，进入下载页面。2.如下图所示，点击
- 这篇文章主要介绍了Python属性和内建属性实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西。整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工
- PDOStatement::errorCodePDOStatement::errorCode — 获取跟上一次语句句柄操作相关的 SQLST
- 1、创建表的同时创建主键约束（1）无命名create table student ( studentid int primary key n
- python turtle自定义画布背景色turtle是python一个简单好用的绘图包，它可以通过设计坐标来实时控制绘图。安装很简单，一行
- 之前一篇文章里提到了利用Cython来编译Python，这次来讲一下如何用Cython给Python写扩展库。两种语言混合编程，其中最重要的
- 我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。小程序好像没有提供相应的方法支持，就需要我们自己写了。原
- 一、Golang环境安装及配置Go Modulehttps://go-zero.dev/cn/docs/prepare/golang-ins
- 本文实例为大家分享了python实现库存商品管理系统的具体代码，供大家参考，具体内容如下题目要求：请设计一个商品管理系统，程序要求根据用户输
- 在目标检测中一个很重要的问题就是NMS及IOU计算，而一般所说的目标检测检测的box是规则矩形框，计算IOU也非常简单，有两种方法：1. 两
- Python 是一门优雅的语言，简洁的语法，强大的功能。当然丰富的第三方库，更能加速开发。那么问题来了，如何安装这些第三方库（包）呢？安装第
- 在《多进程并发与同步》中介绍了进程创建与信息共享，除此之外python还提供了更方便的进程间通讯方式。进程间通讯multiprocessin
