日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

詳解Python?flask的前后端交互_python

作者：_APTX4869 ? 更新時間： 2022-06-02 編程語言

場景：按下按鈕，將左邊的下拉選框內容發送給后端，后端再將返回的結果傳給前端顯示。

按下按鈕之前：

在這里插入圖片描述

按下按鈕之后：

在這里插入圖片描述

代碼結構

這是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  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

欄目分類
最近更新