详解Python flask的前后端交互


Posted in Python onMarch 31, 2022

场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示。

按下按钮之前:

详解Python flask的前后端交互

按下按钮之后:

详解Python flask的前后端交互

代码结构

这是flask默认的框架(html写在templates文件夹内、css和js写在static文件夹内)

详解Python flask的前后端交互

前端

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)

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Python 相关文章推荐
python端口扫描系统实现方法
Nov 19 Python
详解Django框架中用context来解析模板的方法
Jul 20 Python
python遍历 truple list dictionary的几种方法总结
Sep 11 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
Aug 05 Python
浅谈python3.x pool.map()方法的实质
Jan 16 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
Jan 29 Python
Python 内置函数globals()和locals()对比详解
Dec 23 Python
Django 多对多字段的更新和插入数据实例
Mar 31 Python
Django实现随机图形验证码的示例
Oct 15 Python
Python Django路径配置实现过程解析
Nov 05 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
Dec 18 Python
python爬虫scrapy基本使用超详细教程
Feb 20 Python
ubuntu安装jupyter并设置远程访问的实现
Python中time与datetime模块使用方法详解
Mar 31 #Python
Python用tkinter实现自定义记事本的方法详解
Mar 31 #Python
Python利用zhdate模块实现农历日期处理
Mar 31 #Python
详解Python中__new__方法的作用
Mar 31 #Python
利用Python将list列表写入文件并读取的方法汇总
Mar 25 #Python
利用Python多线程实现图片下载器
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
解析php中const与define的应用区别
2013/06/18 PHP
浅析php学习的路线图
2013/07/10 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
python更新列表的方法
2015/07/28 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python常用函数与用法示例
2019/07/02 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
PHP经典面试题
2016/09/03 面试题
学生实习自我鉴定
2013/10/11 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
python使用BeautifulSoup 解析HTML
2022/04/24 Python