脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → python → Python flask

详解Python flask的前后端交互

 更新时间：2022年03月31日 11:23:15   作者：_APTX4869  
这篇文章主要为大家详细介绍了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)

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • Python django导出excel详解

    Python django导出excel详解

    这篇文章主要介绍了Python django导出excel的方法 ，分享了相关代码示例，小编觉得还是挺不错的，具有一定借鉴价值，需要的朋友可以参考下
    2021-11-11
  • python实现简单五子棋小游戏

    python实现简单五子棋小游戏

    这篇文章主要为大家详细介绍了python实现简单五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 关于Python的高级数据结构与算法

    关于Python的高级数据结构与算法

    这篇文章主要介绍了关于Python的高级数据结构与算法,掌握这些数据结构和算法将帮助我们在实际编程中解决各种问题，提高我们的编程技巧和水平,需要的朋友可以参考下
    2023-04-04
  • Python实现人脸识别并进行视频跟踪打码

    Python实现人脸识别并进行视频跟踪打码

    这篇文章主要为大家详细介绍了如何利用Python实现人脸识别并进行视频跟踪打码效果，羞羞的画面统统打上马赛克，感兴趣的小伙伴可以了解一下
    2023-03-03
  • 基于Python实现人脸识别相似度对比功能

    基于Python实现人脸识别相似度对比功能

    人脸识别技术是一种通过计算机对人脸图像进行分析和处理,从而实现自动识别和辨认人脸的技术,随着计算机视觉和模式识别领域的快速发展,人脸识别技术取得了长足的进步,本文给大家介绍了基于Python实现人脸识别相似度对比功能,感兴趣的朋友可以参考下
    2024-01-01
  • 初识Pytorch使用transforms的代码

    初识Pytorch使用transforms的代码

    tansforms功能类似于在计算机视觉流程里的图像预处理部分的数据增强，接下来通过代码介绍下Pytorch使用transforms的详细过程，感兴趣的朋友一起看看吧
    2021-12-12
  • pycharm如何关闭pytest

    pycharm如何关闭pytest

    这篇文章主要介绍了pycharm如何关闭pytest问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Python开发之QT解决无边框界面拖动卡屏问题(附带源码)

    Python开发之QT解决无边框界面拖动卡屏问题(附带源码)

    朋友在学习QT的过程中，都会遇到各种问题，今天就QT无边框拖动花屏问题给大家详细介绍，究竟该如何解决呢，下面通过实例代码和图文相结合给大家详细介绍，需要的朋友参考下吧
    2021-05-05
  • 50行Python代码实现视频中物体颜色识别和跟踪（必须以红色为例）

    50行Python代码实现视频中物体颜色识别和跟踪（必须以红色为例）

    本文通过50行Python代码实现视频中物体颜色识别和跟踪效果，通过实例截图和实例代码给大家讲解的非常详细，需要的朋友可以参考下
    2019-11-11
  • Java及python正则表达式详解

    Java及python正则表达式详解

    正则表达式有元字符及不同组合来构成，通过巧妙的构造正则表达式可以匹配任意字符串，并完成复杂的字符串处理任务
    2017-12-12

最新评论