【Flask】網頁設計教學(四)：接收由前端(客戶端)送回來的資料－恩哥Python量化教室-零基礎也能學會Python

【Flask】網頁設計教學(四)：接收由前端(客戶端)送回來的資料

一、前言

【Flask】網頁設計教學(一)：快速搭起後端伺服器

【Flask】網頁設計教學(二)：配置文件config想知道config是什麼就先看過來

【Flask】網頁設計教學(三)：資料由後端送至前端

上一篇說到配置文件把資料送到客戶端的部分，這邊來說一下如何從客戶端接收資料，並且進行處理後送回去。

二、Flask後端

後端的部分很簡單使用post，先import request，而後藉由methods=['GET', 'POST']告訴他這個路由(網頁)是何種methods，

如果像範例一樣都有，那麼就是混合的部分，大多數也都是這樣寫的，客戶端的人使用post那麼我就用post回傳給他，

如果是get我就回傳get的東西給他，常見的就是帳密輸入的表單之類的。

request.values.get('yourname')取得對應html網頁中name裡面的值。(不懂的可以往下看)

# server.py
from flask import Flask
from flask import render_template, jsonify, request
from werkzeug.wrappers import Response
import config # 配置文件
import json
from jinja2 import Markup
import datetime

# =============================================================================
# 配置及定義
# =============================================================================
app = Flask(__name__)
app.config.from_object(config)


# =============================================================================
# 基本
# =============================================================================

@app.route("/post_test", methods=['GET', 'POST'])
def post():
    
    if request.method == 'POST':
        
        return 'Hello ' + request.values.get('yourname')
    
    return render_template('post_test.html')


if __name__ == '__main__':
    app.run(host='0.0.0.0', port='5000')

# config.py
# 配置文件
DEBUG = True
JSON_AS_ASCII = False

三、html前端

前端的部分很簡單，定義一個表單，還不會的可以看一下我先前的文章，

(【html】認識常用標籤：一個網站基本上會建立的標籤與順序(網頁設計教學(一)之補充A))

這邊我給表單的型態是post對應後端的methods=['post']，action為被觸發時要把資料送回哪個路由(網址)，

最後看到input的部分有個name，這代表這input的名稱叫yourname，從後端的request.values.get('yourname')就可以取得input的值。

#post_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello 恩哥</title>
</head>
<body>
    <form method='post' action="post_test">
        <input type='text' name="yourname">
        <button type='submit'>Submit</button>
    </form>
</body>
</html>