Day 17 Flask 表單 Form 與連線方法

2022 iThome 鐵人賽

DAY 17

Modern Web

資工琪琪的後端學習筆記(python&flask)系列第 17 篇

14th鐵人賽

jddj42840

團隊imac_Big3

2022-10-02 11:19:37

1750 瀏覽

分享至

前後端互動:表單

使用者輸入資料，並且傳送到後端的介面

網址:最核心的部分
超連結:簡易的點擊介面
表單:可傳送額外資料，可設定更多連線細節的介面

實作練習

button演示

我們在index.html內新增這串程式，這裡的action就是點擊button後的傳送網址或路徑

那我把action改成/page呢?

結果是跑/page的對應動作

input表單演示

如果我們form裡面新增一個輸入欄<input type="text" name="nameis">
我們會看到除了網頁呈現會變網址也有變動

所以nameis就是我們設定input的name，而chichi就是我們輸入的值

我們可以利用要求字串(Query String)的語法做一些其他的動作

像是在python中做字串串接等等...
這個要演示的是利用輸入欄輸入並在分頁中顯示輸入

我們index.html就不而外更改

在/page利用request.args.get獲取input的值

我想把結果印在/page所以要在page.html上增加{{變數}}語法

我們看看結果:

code

python -> 0725practice.py


# Flask網站前後端互動 09 - 超連結與圖片
# 載入Flask、Request、render_template
from flask import Flask, request, render_template

# 建立 Application 物件,設定靜態檔案的路徑處理
# http://127.0.0.1:5000/head.png 為圖片路徑
app = Flask(__name__, static_folder="public", static_url_path="/")

# 處理路徑 / 的對應函市


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/page")
def page():
    name = request.args.get("nameis")
    return render_template("page.html", namepage=name)


# 啟動Server
app.run()

html1 ->index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是標題</title>
</head>

<body>
    <h3>網頁的主畫面</h3>
    <form action="/page">
        名字:<input type="text" name="nameis">
        <button>點擊送出</button>
    </form>
</body>

</html>

html2 -> page.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page1</title>

</head>

<body>
    <h1>我的名字叫 {{namepage}}</h1>
</body>

</html>