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
投稿猜你喜欢
原理请查看前面几篇文章。1、数据源SH600519.csv 是用 tushare 模块下载的 SH600519 贵州茅台的日 k 线数据，本- 下面通过实例代码给大家介绍python 中pyqt5 树节点点击实现多窗口切换问题，具体代码如下所示：# coding=utf-8impor
- 前言我们交换数组可以实现元素上下移动了，这个效果我们在表格或以前排序算法中都会用到，下面来看一个JavaScript下实现交换数组元素上下移
- 一.生成器简介在python中,带yield的方法不再是普通方法,而是生成器,它的执行顺序不同与普通方法.普通方法的执行是从头到尾,最后re
- 布尔类型是PHP中 最简单的类型。它的值可以为 TRUE 或 FALSE。如：$foo=false;$foo1=true;echo &quo
- f-string 字符串格式化语法f-string 是 Python 3.6 版本引入的一种新的字符串格式化语法。与其他字符串格式
- 前言为什么做出这个？就是有时候从网上下载的资料中的pdf有水印，看着不舒服。比如说我从网上下载的试卷，然后去打印店打印，打印之后水印看着很不
- digo工具地址：https://github.com/werbenhu/digo特性使用注释中的注解自动代码生成自动检测循环依赖编译时期依
- 0. 简介上一篇博客简单介绍了GMP模型，这一篇我们介绍一下Go调度器的初始化过程，也就是在main.main函数运行之前所做的事情。1.
- 怎样编制留言簿程序呢？留言簿程序并不难，有很多选择可以实现，如CGI程序等等。本文介绍怎样用JavaScript编制留言簿程序，下面是一个完
- 一个Javascript 的类库，用于table内容排序。使用很方便，不用每次都去调用数据库了。特别适合多表查询的排序。加上<tbod
- Python：type、object、classPython: 一切为对象>>> a = 1>>> ty
- 用vue写业务代码时候，后端大神丢给我一堆数据，要求是做全选，反选功能，然后把用户更改的数据全部返回给他基本思路如果父级选中了，那么父级下面
- css的流行导致了标签的流行，很直观，看起来很清爽。流行的一部分，还有很多种功能强大且美观的导航。。。1. Change.org2. N.D
- 如下所示：>>> dict={}>>> dict['list']=[]>>&
- 一个简单的例子：将如下代码另存为.wsc文件，并右键“注册”（卸载时右键“不注册”）。<Component> <regis
- 一、前言1.1 关于描述性统计分析概括地来说，描述性统计分析就是在收集到的数据的基础上，运用制表和分类，图形以及计算概括性数据来描述数据特征
- mysqladmin是MySQL官方提供的shell命令行工具，它的参数都需要在shell
- 具体的实现代码，如下：下面会给简单的说明。<?php /* 1. 配置好你的数据库连接 2. 注意数据表名的前缀 默认为dede_ 3
- 前面的例子中，点击事件都是通过click()方法实现鼠标的点击事件。其实在WebDriver中，提供了许多鼠标操作的方法，这些操作方法都封装
