Flask实现基于表单数据的动态URL跳转问题

核心结论 #

必须为/Page-2/<answer1>/<answer2>配置动态路由，Flask依赖路由规则匹配请求，没有对应规则的URL会直接返回404，这是你跳转失败的核心原因。

具体实现步骤 #

1. 后端配置动态路由（关键）

在Flask app中添加两个路由：一个处理Page-1的表单提交，另一个接收Page-2的路径参数：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# 处理Page-1的表单展示与提交
@app.route('/Page-1', methods=['GET', 'POST'])
def page1():
    if request.method == 'POST':
        # 获取表单提交的参数
        answer1 = request.form.get('answer1')
        answer2 = request.form.get('answer2')
        # 用url_for生成目标URL，避免硬编码
        return redirect(url_for('page2', ans1=answer1, ans2=answer2))
    # GET请求返回表单页面
    return render_template('page1.html')

# Page-2的动态路由，接收路径参数
@app.route('/Page-2/<ans1>/<ans2>')
def page2(ans1, ans2):
    # 将参数传递给模板，或做业务处理
    return render_template('page2.html', answer1=ans1, answer2=ans2)

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

• <ans1>和<ans2>是动态路由参数，Flask会自动把URL对应位置的值传递给page2函数。
• 用url_for生成URL比直接拼接更可靠，能自动处理编码和路由映射。

2. 前端表单的正确处理（JS跳转方案）

如果坚持用前端JS跳转，要解决参数编码和默认提交行为的问题，示例page1.html代码：

<form id="answerForm">
    <input type="text" name="answer1" id="answer1" required>
    <input type="text" name="answer2" id="answer2" required>
    <button type="submit">提交</button>
</form>

<script>
    document.getElementById('answerForm').addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        const ans1 = document.getElementById('answer1').value.trim();
        const ans2 = document.getElementById('answer2').value.trim();
        
        if (ans1 && ans2) {
            // 对参数编码，避免特殊字符破坏路由
            const encodedAns1 = encodeURIComponent(ans1);
            const encodedAns2 = encodeURIComponent(ans2);
            window.location.href = `/Page-2/${encodedAns1}/${encodedAns2}`;
        }
    });
</script>

• 必须用encodeURIComponent处理参数，防止参数含/、&等特殊字符导致路由匹配失败。
• 调用e.preventDefault()避免表单触发默认的POST请求，确保JS跳转生效。

常见问题排查 #

• 跳转后404：检查Flask是否配置了/Page-2/<ans1>/<ans2>的动态路由，参数名是否和函数参数一致。
• 参数为空或错误：前端确认input的name属性与后端request.form.get()的参数名匹配，JS获取值的DOM ID正确。
• 特殊字符异常：前端未编码参数导致路由解析错误，务必用encodeURIComponent处理。

内容的提问来源于stack exchange，提问作者Ethan A