如何在Flask的Jinja模板中实现面向输入的for、if循环逻辑

• 首次GET请求未传递x参数，模板循环无法触发，不会生成输入表单
• 所有输入框name属性重复，POST提交时只能获取到最后一个输入值
• 模板中错误使用Python的format语法，Jinja需使用{{变量名}}直接输出值
• 变量命名使用了Python内置关键字list，存在逻辑隐患

适合需要同时展示所有比对项，全部填写完成后统一提交的场景

后端代码 #

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def function():
    x = 4
    # 提前生成所有需要比对的i,j对，避免模板和后端重复写逻辑
    compare_pairs = [(i,j) for i in range(1,x) for j in range(1,x) if i<j]
    if request.method == 'POST':
        input_list = []
        # 按顺序读取每个比对项的输入值
        for idx, (i,j) in enumerate(compare_pairs):
            input_val = request.form.get(f"input_{idx}", "")
            input_list.append(input_val)
        string = " ".join(input_list)
        return render_template('index.html', x=x, compare_pairs=compare_pairs, string=string)
    # GET请求也要传递模板渲染需要的参数
    return render_template('index.html', x=x, compare_pairs=compare_pairs, string="")

Jinja模板代码 #

<form method="post" action="{{ url_for('function') }}">
    <div>
        {% for idx, (i,j) in enumerate(compare_pairs) %}
        <div class="compare-item">
            <p>{{ i }} vs {{ j }} ?: </p>
            <input type="text" name="input_{{ idx }}" id="input_{{ idx }}" required>
        </div>
        {% endfor %}
        <div class="input-group-append">
            <button class="btn" type="submit" value="Submit">提交所有结果</button>
        </div>
    </div>
</form>

{% if string %}
<p>最终拼接结果：{{ string }}</p>
{% endif %}

适合每次只展示一个比对项，输入完成后再展示下一个的场景，和你原来用input逐个弹窗的效果完全一致

后端代码 #

from flask import Flask, render_template, request, session

app = Flask(__name__)
# session加密密钥，可自定义
app.secret_key = 'your_custom_secret_key'

@app.route('/', methods=['GET', 'POST'])
def function():
    x = 4
    compare_pairs = [(i,j) for i in range(1,x) for j in range(1,x) if i<j]
    total_count = len(compare_pairs)
    
    # 首次访问初始化输入进度
    if 'current_idx' not in session:
        session['current_idx'] = 0
        session['input_list'] = []
    
    if request.method == 'POST':
        # 读取当前输入的内容存入session
        current_val = request.form.get('current_input', '')
        session['input_list'].append(current_val)
        session['current_idx'] += 1
        session.modified = True
        
        # 全部输入完成，返回结果
        if session['current_idx'] >= total_count:
            string = " ".join(session['input_list'])
            # 清空进度，下次访问重新开始
            session.pop('current_idx')
            session.pop('input_list')
            return render_template('index.html', finished=True, string=string)
    
    # 未完成输入，返回当前要填写的比对项
    current_pair = compare_pairs[session['current_idx']]
    return render_template('index.html', finished=False, current_pair=current_pair, string="")

Jinja模板代码 #

{% if not finished %}
<form method="post" action="{{ url_for('function') }}">
    <div>
        <p>{{ current_pair[0] }} vs {{ current_pair[1] }} ?: </p>
        <input type="text" name="current_input" required>
        <div class="input-group-append">
            <button class="btn" type="submit">确认</button>
        </div>
    </div>
</form>
{% else %}
<p>最终拼接结果：{{ string }}</p>
{% endif %}

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