後端幼幼班Day17 Flask篇 GET & POST

2022 iThome 鐵人賽

DAY 17

Modern Web

Willisの後端幼幼班系列第 17 篇

14th鐵人賽

Willis

團隊imac_Big3

2022-10-02 09:11:53

1540 瀏覽

分享至

哈囉大家好啊 ~ 今天要介紹得到網頁資料的兩種方式 GET & POST。

抓取參數

`request`

Flask是透過request這個函數來抓取前端頁面給予的參數，request也是需要經過導入模組才能使用的。

GET

`request.args`

專案架構
填寫一個輸入username的HTML檔的網頁 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Page</title>
  </head>
  <body>
    <form method='get' action={{ url_for('hello') }}>
      <input type="text" name="username"/>
      <input type="submit" value="輸入"/>
    </form>
  </body>
</html>

還記得url_for( )嗎 ? 可以用jinja2的語法回傳喔。

程式碼 app.py

# 導入模組Flask, request, render_template
from flask import Flask, request, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route('/')
def login():
    return render_template('login.html')  # 登入頁面


@app.route("/hello", methods=['GET', 'POST'])  # methods 路由允許的方式
def hello():
    if request.method == 'GET':  # 使用者使用GET時執行
        return 'Hello' + request.args['username']  # 使用request.args取得前端的username


if __name__ == '__main__':
    app.run()

登入頁面
登入後頁面

`request.values`

request.values可以抓取POST和GET，沒有限制。

網頁 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Page</title>
  </head>
  <body>
    <form method='get' action={{ url_for('hello') }}>
      <input type="text" name="username"/>
      <input type="submit" value="輸入"/>
    </form>
  </body>
</html>

程式碼 app.py

# 導入模組Flask, request, render_template
from flask import Flask, request, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route('/')
def login():
    return render_template('login.html')  # 登入頁面


@app.route("/hello", methods=['GET', 'POST'])  # methods 路由允許的方式
def hello():
    if request.method == 'GET':  # 使用者使用GET時執行
        return 'Hello ' + request.values['username']  # 使用request.values取得前端的username


if __name__ == '__main__':
    app.run()

登入頁面
登入後頁面

Post

`request.form`

網頁 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>登入頁面</title>
  </head>
  <body>
    <form method='post' action={{ url_for('hello') }}>
      <input type="text" name="username"/>
      <input type="submit" value="輸入"/>
    </form>
  </body>
</html>

程式碼 app.py

# 導入模組Flask, request, render_template
from flask import Flask, request, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route('/')
def login():
    return render_template('login.html')  # 登入頁面


@app.route("/hello", methods=['GET', 'POST'])  # methods 路由允許的方式
def hello():
    if request.method == 'POST':  # 使用者使用POST時執行
        # 使用request.form取得前端的username
        return 'Hello ' + request.form['username']


if __name__ == '__main__':
    app.run()

登入頁面
登入後頁面

有發現與GET的不同處嗎 ?

`request.values`

網頁 login.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>登入頁面</title>
  </head>
  <body>
    <form method='post' action={{ url_for('hello') }}>
      <input type="text" name="username"/>
      <input type="submit" value="輸入"/>
    </form>
  </body>
</html>

程式碼 app.py

# 導入模組Flask, request, render_template
from flask import Flask, request, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route('/')
def login():
    return render_template('login.html')  # 登入頁面


@app.route("/hello", methods=['GET', 'POST'])  # methods 路由允許的方式
def hello():
    if request.method == 'POST':  # 使用者使用POST時執行
        # 使用request.form取得前端的username
        return 'Hello ' + request.values['username']


if __name__ == '__main__':
    app.run()