flask前后端交互

目录

  • 前端
    • index.html
    • script.js
  • 后端
    • app.py

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

  • 按下按钮之前:
    在这里插入图片描述
  • 按下按钮之后:
    flask前后端交互_第1张图片

代码结构
这是flask默认的框架(html写在templates文件夹内、css和js写在static文件夹内)
flask前后端交互_第2张图片


前端

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>TEMPtitle>
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里添加

你可能感兴趣的:(Python,flask,python)