详解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实现的解析crontab配置文件代码
Jun 30 Python
Python的Flask开发框架简单上手笔记
Nov 16 Python
python使用sqlite3时游标使用方法
Mar 13 Python
Python爬虫使用脚本登录Github并查看信息
Jul 16 Python
Sanic框架Cookies操作示例
Jul 17 Python
在PyCharm下使用 ipython 交互式编程的方法
Jan 17 Python
python 多线程对post请求服务器测试并发的方法
Jun 13 Python
Python常用数据类型之间的转换总结
Sep 06 Python
安装python及pycharm的教程图解
Oct 10 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
Sep 23 Python
python如何实现递归转非递归
Feb 25 Python
python 算法题——快乐数的多种解法
May 27 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
php数组删除元素示例
2014/03/21 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
环保建议书500字
2014/05/14 职场文书
邹越演讲观后感
2015/06/15 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server