Python 提交表单后 Flask 重定向不起作用

Question

我正在开发小型 Flask 应用程序，它将获取一些数据并在完成后将其打印出来。提交表单后，它应该重定向到不同的站点（终点），但这并没有发生。我用了 return redirect(url_for('<name>')) and return render_template('<name>.html').

在 form.html 内部，我使用脚本在用户需要时动态创建新文件，并在该脚本内提交操作。

代码：

from flask import Flask, session, render_template, request, redirect, url_for
from os import urandom


app = Flask(__name__)

app.secret_key = urandom(24)


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return render_template('login.html')


@app.route('/logout')
def logout():
    session.clear()
    return redirect(url_for('index'))


@app.route('/')
def index():
    login = False
    if 'username' in session:
        login = True
    return render_template('login_home.html', login=login)


@app.route('/form')
def form():
    if 'username' in session:
        return render_template('form.html')
    return redirect(url_for('index'))


@app.route("/getform", methods=["POST", "GET"])
def getform():
    if request.method == 'POST':
        name = request.form.get('name')
        email = request.form.get('email')
        phone = request.form.get('phone')
        address = request.form.get('address')
        names = request.form.getlist('name[]')
        emails = request.form.getlist('email[]')
        print(name, email, phone, address, names, emails)
        return redirect(url_for('index'))


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

这里是 form.html 文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 <script>

$(document).ready(function() {

var MaxInputs       = 10; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID


var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added


$(AddButton).click(function (e)  //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('<div class="row"><p class="col-xs-6"><input type="text" placeholder="Unesite ime i prezime zaposlenika" class="form-control skill_list" name="name[]" id="field_'+ FieldCount +'"/><input type="email" placeholder="Unesite email zaposlenika" class="form-control skill_list" name="email[]" id="field_'+ FieldCount +'"/></p><a href="#" class="btn btn-danger removeclass">×</a></div>');
        x++; //text box increment
    }
    return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
        $(this).parent('div').remove(); //remove text box
         x--; //decrement textbox
    }
    return false;
})

 $('#submit').click(function(){
    $.ajax({
        url:"/getform",
        method:"POST",
        data:$('#add_skills').serialize()
    });
});

});
</script>
<style>
.row {padding:10px;}
</style>
<div class="container"><br/> <br/>
    <h2 align="center">Form</h2><div id="resultbox"></div>
    <div class="form-group">
        <form name="add_skills" id="add_skills">
        <div class="form-group">
            <input type="text" class="form-control" id="Name" aria-describedby="emailHelp"
                   placeholder="name" name="name" value="{{ name }}" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="address" aria-describedby="emailHelp"
                   placeholder="address" name="address" value="{{ address }}" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="phone" aria-describedby="emailHelp"
                   placeholder="phone" name="phone" value="{{ phone }}" required>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp"
                   placeholder="email" name="email" value="{{ email }}" required>
          </div>
          <label>Additional info:</label>
        <div id="InputsWrapper">
            <div class="row">
                <div class="col-xs-6"><input type="text" name="name[]" placeholder="name" class="form-control name_list" />
                <input type="email" name="email[]" placeholder="email" class="form-control name_list" /></div>
                <div class="col-xs-6"><button type="button" name="add" id="AddMoreFileBox" class="btn btn-success">Add</button></div>
            </div>
        </div>
        <br/>
        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </form>
    </div>
</div>
</body>
</html>

我不会 post login.html 和 login_home.html 因为它与这个问题无关。

Answer 1

问题已解决：问题出在 form.html:

我删除了：

$('#submit').click(function(){
    $.ajax({
        url:"/getform",
        method:"POST",
        data:$('#add_skills').serialize()
    });
});

将 method="POST" 和 action="/form" 添加到 <form> 标签：

<form name="add_skills" id="add_skills" action="/form" method="POST">

替换为：

<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />

与：

<button type="submit" class="btn btn-secondary">Submit</button>

在 main.py 中添加了名称为 form 的新端点：

@app.route('/form', methods=["POST"])
def form():
    name = request.form.get("name")
    address = request.form.get("address")
    telephone = request.form.get("phone")
    email = request.form.get("email")
    print(name, address, telephone, email)
    return render_template("login_home.html")

所以这解决了我的问题:)

我希望这对遇到与我类似问题的人有所帮助。

Python 提交表单后 Flask 重定向不起作用

Python Flask redirect after form is submited not working

html

javascript

python

ajax

flask