我正在重新創建簡單的網路應用程式來練習。在本網站密碼生成器中，一旦您按下生成密碼，生成的密碼將被輸入到文本框中。我如何在 Flask 中做到這一點？我所做的解決方案是重定向到一個只包含密碼的新網頁，但我認為這不是一個好的設計。
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("index.html")
else:
# Get the input values
length = int(request.form.get("charnum"))
numbers = bool(request.form.get("numbers"))
symbols = bool(request.form.get("symbols"))
lowercase = bool(request.form.get("lowercase"))
uppercase = bool(request.form.get("uppercase"))
similar = bool(request.form.get("excludeSimilar"))
ambiguous = bool(request.form.get("ambiguous"))
# Generate Password with the preceding conditions
password = generate_pass(length, symbols, numbers, uppercase, lowercase, similar, ambiguous)
return render_template("index.html", password=password)
uj5u.com熱心網友回復：
它需要使用 JavaScript 向服務器發送 AJAX 請求。服務器只能回傳密碼（沒有 HTML）并且 JavaScript 必須把它放在文本框中。
但是鏈接中的頁面使用 JavaScript 直接在瀏覽器中生成密碼
使用 JavaScript 從 FORM 獲取值、發送到服務器、從服務器獲取結果并將密碼放入 FORM 的最小作業代碼。
from flask import Flask, request, render_template_string
import random
import string
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == "POST":
data = request.json
lower_number = int(data.get('lower', 0))
upper_number = int(data.get('upper', 0))
password_lower = random.choices(string.ascii_lowercase, k=lower_number)
password_upper = random.choices(string.ascii_uppercase, k=upper_number)
password = password_lower password_upper
random.shuffle(password) # change order of chars (work in-place so doesn't need to assign to variable)
return "".join(password)
return render_template_string('''<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="POST">
Lower: <input type="text" id="lower_id" value="10" /><br/>
Upper: <input type="text" id="upper_id" value="10" /><br/>
<button type="submit" name="btn" onclick="generate();return false">GENERATE</button></br>
<input type="text" id="password_id" /><br/>
</form>
<script>
var password = document.getElementById("password_id");
var lower_input = document.getElementById("lower_id");
var upper_input = document.getElementById("upper_id");
function generate() {
fetch("/", {
method: "POST",
body: JSON.stringify({
lower: lower_input.value,
upper: upper_input.value,
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
})
.then(response => response.text())
.then(text => {password.value = text;})
}
</script>
</body>
</html>''')
if __name__ == '__main__':
#app.debug = True
app.run()
編輯：
在fetch我設定
- 網址
"/"， - 方法
POST， - 資料轉換為 JSON，
content-type作為 JSON - 所以 Flask 可以得到它request.json，accept作為 JSON - 通知 Flask 我希望回應為 JSON（但我不尊重它，在 Flask 中我發送普通文本而不是 JSON - 所以我可以跳過這個標題）
因為 JavaScript 使用異步函式，所以
fetch在.then()收到服務器回應時執行下一個函式。此函式從回應中獲取text/ 。body它還必須等待結果，并.then()在最終從回應中獲取文本時用于執行下一個函式。這個函式把這個文本<input>輸入密碼。
Mozilla：使用 Fetch和Fetch API
uj5u.com熱心網友回復：
對于網頁中的實時回應，您必須使用 javascript。您可以使用 javascript 呼叫您的燒瓶API（使用AJAX等工具，...），然后將生成的密碼放入文本框中或在 javascript 中實作您的密碼生成演算法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/451627.html