Flask开发：如何基于传入结果数组长度循环渲染展示全量信息的HTML卡片

后端路由调整 #

首先移除路由里的冗余逻辑，避免全局变量带来的多用户数据串扰问题，直接将结构化的查询结果列表传给模板即可：

if request.method == "POST":
    major = request.form["major"]
    country = request.form["country"]
    price = request.form["price"]
    universities = search_universities(country, major, price)
    if universities:
        # 直接将完整查询列表作为模板变量传入，无需额外计算长度、拆分散值
        return render_template('result.html', uni_list=universities)
    else:
        # 空结果场景也传入空列表，避免模板循环报错
        return render_template('result.html', uni_list=[])
return render_template('search.html')

注意：不要使用global universities存储查询结果，多用户并发访问时会出现查询结果互相覆盖的问题，最终把其他用户的搜索结果展示给当前用户。

模板层循环渲染 #

直接替换模板里硬编码的固定卡片结构，用Jinja2内置的循环语法，根据传入列表的长度自动生成对应数量的卡片，不需要额外写前端JS动态创建DOM：

{% extends "base.html" %}
{% block title %} Search {% endblock %}
{% block style %}
/* 给卡片增加统一间距，避免元素挤压重叠 */
.card {
    margin: 16px auto;
    max-width: 800px;
}
{% endblock %}
{% block body %}
<h1 align="center">Results</h1>

<!-- 无结果场景提示 -->
{% if uni_list | length == 0 %}
    <p align="center">未查询到匹配的院校信息</p>
{% else %}
    <!-- 遍历结果列表，每遍历一项生成一张卡片 -->
    {% for uni in uni_list %}
    <div class="card">
        <img src="{{url_for('static', filename='pictures/uni.jpg')}}" alt="院校配图" style="width:20%">
        <div class="container">
            <h4><b>Name: {{ uni.name }}</b></h4>
            <p>Country: {{ uni.country }}</p>
            <p>Major: {{ uni.major }}</p>
            <p>Select and visit: <a href="{{ uni.link }}" target="_blank">{{ uni.link }}</a></p>
        </div>
    </div>
    {% endfor %}
{% endif %}
{% endblock %}

适配元组格式的返回结果 #

如果search_universities返回的每一项是固定索引的元组（比如注释中提到的x[0]=name, x[1]=country, x[2]=major, x[4]=link），直接替换循环内的变量取值即可：

<h4><b>Name: {{ uni[0] }}</b></h4>
<p>Country: {{ uni[1] }}</p>
<p>Major: {{ uni[2] }}</p>
<p>Select and visit: <a href="{{ uni[4] }}" target="_blank">{{ uni[4] }}</a></p>

常见问题修正 #

• 之前尝试的JS动态创建DOM逻辑存在错误：document.getElementsByTagName('body')[2]的索引取值不对，整个页面的body标签只有1个，取索引2根本无法获取到对应元素，且这种方式需要把后端数据手动传到前端JS，步骤冗余，纯模板渲染的方式更稳定。
• 原模板里的变量输出没有补全引号，比如img src={{xxx}}，路径包含空格时会导致图片加载失败，需要统一写成src="{{xxx}}"的格式。
• 如果需要给每张卡片自动生成连续id，可以在循环内借助Jinja的loop变量实现，比如<div class="card" id="element{{ loop.index }}">，会自动生成element1、element2这类连续的id值，不需要手动硬编码。

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