详解Python flask的前后端交互
作者:_APTX4869 发布时间:2023-03-19 06:41:05
标签:Python,flask,前后端交互
场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示。
按下按钮之前:
按下按钮之后:
代码结构
这是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
0
投稿
猜你喜欢
- 1.字符串的驻留机制字符串:在Python中字符串是基本的数据类型,是一个不可变的字符序列2.什么叫字符串的驻留机制仅保存一份相同且不可变字
- 在学习OpenCV或者其他关于Python技术的时候,我们通常需要准备不同的Python环境,我选择了Anaconda作为我的Python环
- matplotlib官网 matplotlib库默认英文字体添加黑体(‘SimHei')为绘图字体代码:plt.rcPar
- 案例以论坛为例,有个接口返回帖子(posts)信息,然后呢,来了新需求,说需要显示帖子的 author 信息。此时会有两种选择:在 post
- 配置文件注释里面有写,懒得用配置文件了代码# 京东云无线路由宝推送import requestsimport jsonimport time
- 利用XMLHTTP无刷新自动实时更新数据,2秒自动刷新一次,2秒取得一次数据.demo.htm 前台显示<script la
- 前言本文通过示例给大家详细介绍了关于python打印三角形的相关,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧1、直角三角
- 1.概述pyecharts 是百度开源的,适用于数据可视化的工具,配置灵活,展示图表相对美观,顺滑。2.安装python3环境下的安装:pi
- 本文实例讲述了python获取文件版本信息、公司名和产品名的方法,分享给大家供大家参考。具体如下:该python代码可得到文件版本信息、公司
- “看图购”beta版今日起正式在淘宝网上线了,域名是:http://go.taobao.com。从此您也可以像翻看杂志一样翻看女装的图片了,
- 目录Counter类创建计数值的访问与缺失的键计数器的更新键的删除elements()most_common([n])fromkeys浅拷贝
- 字典是python中唯一内建的映射类型。字典中的值并没有特殊的顺序,但是都存储在一个特定的键(key)里。键可以是数字,字符串甚至是元组。1
- 请教:如何在现存的文档中动态嵌入一段JS?如果是一段CSS呢?创建一个<script></script>并在scri
- 由于Internet的历史原因,apin负责整个网络IP的整体规划以及北美区
- 写爬虫是一个发送请求,提取数据,清洗数据,存储数据的过程。在这个过程中,不同的数据源返回的数据格式各不相同,有 JSON 格式,有 XML
- 我就废话不多说了,大家还是直接看代码吧!'''Created on 2018-4-4'''k
- 放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScr
- 新手,参考了以下链接:python opencv在图像上画矩形(已验证)本文可以实现在指定图片上动态绘制圆和矩形。import cv2imp
- 下面是最终代码 (windows下实现的) # -*- coding: cp936 -*- import os path = 'D:
- 前言有趣的实战项目,用Python+xlwings模块制作天气预报表让我们愉快地开始吧~开发工具Python版本: 3.6.4相关模块:re