如何从HTML select元素获取选择并在Flask+SQLAlchemy中查询返回至同页

方案1：表单提交（页面刷新式） #

1. 前端模板修改 #

把select放进表单里，提交到Flask路由，同时预留结果展示区域：

<form method="POST" action="{{ url_for('get_links') }}">
  <select name="selected_name">
    {% for name in names %}
      <option value="{{ name.id }}">{{ name.name }}</option>
    {% endfor %}
  </select>
  <button type="submit">查询链接</button>
</form>

<!-- 展示查询结果 -->
{% if links %}
  <h3>对应链接</h3>
  <ul>
    {% for link in links %}
      <li>{{ link.url }}</li>
    {% endfor %}
  </ul>
{% endif %}

这里用name.id作为选项值，比直接用名称更稳妥，避免名称重复导致查询出错。

2. Flask路由调整 #

修改原路由，支持POST请求，获取选中的name_id后查询对应links，再把数据传回模板：

from flask import Flask, render_template, request
from models import Name, Link  # 你的模型文件按需调整

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def get_links():
    names = Name.query.all()
    links = []
    if request.method == 'POST':
        # 拿到选中的name_id并转成整数
        selected_name_id = int(request.form.get('selected_name'))
        # 执行查询
        links = Link.query.filter_by(name_id=selected_name_id).all()
    return render_template('index.html', names=names, links=links)

用户提交表单后页面会刷新，同时展示匹配的links数据。

方案2：AJAX异步加载（无刷新） #

如果不想刷新页面，用AJAX实现动态加载更友好：

1. 前端模板修改 #

保留select，添加结果展示区，用JS监听选项变化并发送请求：

<select id="name-select">
  {% for name in names %}
    <option value="{{ name.id }}">{{ name.name }}</option>
  {% endfor %}
</select>

<!-- 结果展示容器 -->
<div id="links-result"></div>

<script>
const nameSelect = document.getElementById('name-select');
nameSelect.addEventListener('change', function() {
    const selectedId = this.value;
    // 发送异步请求
    fetch('/get_links_ajax', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name_id: selectedId }),
    })
    .then(res => res.json())
    .then(data => {
        const resultDiv = document.getElementById('links-result');
        if (data.links.length === 0) {
            resultDiv.innerHTML = '<p>暂无对应链接</p>';
            return;
        }
        let html = '<h3>对应链接</h3><ul>';
        data.links.forEach(link => {
            html += `<li>${link.url}</li>`;
        });
        html += '</ul>';
        resultDiv.innerHTML = html;
    })
    .catch(err => console.error('请求出错：', err));
});
</script>

2. Flask新增AJAX接口 #

单独写一个接口处理异步请求，返回JSON格式的links数据：

from flask import jsonify

@app.route('/')
def index():
    names = Name.query.all()
    return render_template('index.html', names=names)

@app.route('/get_links_ajax', methods=['POST'])
def get_links_ajax():
    data = request.get_json()
    name_id = int(data.get('name_id'))
    links = Link.query.filter_by(name_id=name_id).all()
    # 把模型对象转成字典列表，方便JSON序列化
    links_data = [{'url': link.url, 'id': link.id} for link in links]
    return jsonify({'links': links_data})

关键提醒 #

• 优先用name.id作为选项值，避免名称重复引发的查询错误
• 表单提交要确保路由开启POST支持
• AJAX方式要注意JSON数据的序列化/反序列化，保证前后端数据能正确传递

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