How to write to an HTML page using Flask without refreshing the page?-CodePudding

I'm recreating simple web apps to practice. In this website Password Generator, once you press generate password, the generated password will be inputted in the textbox. How do I do this in Flask? The solution I did was redirect to a new webpage containing only the password but I don't think it is a good design.

@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)

CodePudding user response：

It needs to use JavaScript to send AJAX request to server. Server can return only password (without HTML) and JavaScript has to put it in textbox.

But page from your link uses JavaScript to generate password directly in browser

Minimal working code which uses JavaScript to get values from FORM, send to server, get result from server and put password in 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()

CodePudding user response：

for real-time response in webpages, you must use javascript. you can either call your flask API with javascript (using tools like AJAX,...), then put the generated password in the textbox or implement your password generation algorithm in javascript.