详解Python flask的前后端交互
作者:_APTX4869 时间:2023-03-19 06:41:05
场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示。
按下按钮之前:
按下按钮之后:
代码结构
这是flask默认的框架(html写在templates文件夹内、css和js写在static文件夹内)
前端
index.html
很简单的一个select下拉选框,一个按钮和一个文本,这里的 {{ temp }}
是从后端调用的。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="static/css/style.css">
<title>TEMP</title>
</head>
<body>
<div class="container">
<div class="person">
<select id="person-one">
<option value="新一">新一</option>
<option value="小兰">小兰</option>
<option value="柯南">柯南</option>
<option value="小哀">小哀</option>
</select>
</div>
<div class="transfer">
<button class="btn" id="swap">转换</button>
</div>
<p id="display">{{ temp }}</p>
</div>
<script src="/static/js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
script.js
这里给按钮添加一个监听事件,按下就会给服务器发送内容,成功了则返回内容并更改display
。
注意
需要在html里添加
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
,否则$
字符会报错。dataType
如果选择的是json,则前后端交互的内容均应为json格式。
const person = document.getElementById('person-one');
const swap = document.getElementById('swap');
function printPerson() {
$.ajax({
type: "POST",
url: "/index",
dataType: "json",
data:{"person": person.value},
success: function(msg)
{
console.log(msg);
$("#display").text(msg.person);//注意显示的内容
},
error: function (xhr, status, error) {
console.log(error);
}
});
}
swap.addEventListener('click', printPerson);
后端
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
@app.route("/index", methods=['GET', 'POST'])
def index():
message = "选择的人物为:"
if request.method == 'POST':
person = str(request.values.get("person"))
return {'person': person}
return render_template("index.html", temp=message)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8987, debug=True)
来源:https://blog.csdn.net/nanke_4869/article/details/123850333
标签:Python,flask,前后端交互
0
投稿
猜你喜欢
python regex库实例用法总结
2023-11-02 12:17:27
react redux及redux持久化示例详解
2023-07-17 07:18:53
Python中的配对函数zip()解读
2021-04-14 20:54:33
php bugs代码审计基础详解
2023-06-02 13:49:52
如何把图片上传到数据库中并显示出来?
2009-11-06 13:50:00
python数据结构:数据类型
2022-05-05 01:54:19
python仿抖音表白神器
2023-03-15 03:35:56
对pandas replace函数的使用方法小结
2022-07-04 15:20:24
Python制作个性化的词云图实例讲解
2021-10-17 03:51:02
pytorch 实现在测试的时候启用dropout
2022-03-16 18:08:22
IE下绝对定位的元素不能响应鼠标的bug修正
2008-09-10 13:03:00
MySQL数据库之UPDATE更新语句精解
2009-03-20 15:21:00
opera img onload重复执行
2008-01-17 12:01:00
MSSQL数据库还原图解教程
2009-01-12 17:58:00
ROW_NUMBER SQL Server 2005的LIMIT功能实现(ROW_NUMBER()排序函数)
2012-06-06 20:11:21
Orcas中C#语言的新特性:自动属性,对象初始化器,和集合初始化器
2007-09-23 12:43:00
下一代web:浏览器存储支持
2008-06-11 11:50:00
Python3中多线程编程的队列运作示例
2022-06-15 23:27:49
用pytorch的nn.Module构造简单全链接层实例
2022-01-04 00:00:17
通过Python实现猜灯谜游戏的示例代码
2022-01-10 17:49:40