如何使用JavaScript获取Flask数据库数据并实现前端下拉框用户展示

下面是3种常用的实现方式，可根据业务场景选择：

方法1：模板内直接注入JSON（最常用，适合中小数据量） #

这是最简单的方案，页面渲染时直接把序列化后的用户数据注入到JS变量中，不需要额外发起请求。

后端代码示例 #

from flask import Flask, render_template
import json
from your_app.models import User # 替换为自己项目的User模型

app = Flask(__name__)

@app.route('/')
def index():
    # 从数据库查询所需的用户字段，避免返回冗余数据
    users = User.query.with_entities(User.id, User.username).all()
    # 转换为字典列表后序列化为JSON字符串
    user_data = [{"id": u.id, "name": u.username} for u in users]
    user_json = json.dumps(user_data)
    return render_template('index.html', user_json=user_json)

前端模板代码示例 #

<!-- 下拉框DOM -->
<select id="user-select"></select>

<script>
// 直接接收后端注入的JSON，加safe过滤器避免Jinja2转义特殊字符
const userList = {{ user_json|safe }};

// 渲染下拉框逻辑
const selectEl = document.getElementById('user-select');
userList.forEach(user => {
  const option = document.createElement('option');
  option.value = user.id;
  option.innerText = user.name;
  selectEl.appendChild(option);
});
</script>

方法2：通过HTML自定义属性传递（适合禁止内联JS的场景） #

如果项目安全规则不允许写内联JS，可以把数据存在DOM的自定义属性里，JS读取后再解析。

前端模板代码示例 #

<select id="user-select" data-users="{{ user_json|safe }}"></select>

<!-- 外部引入的JS文件也可以读取该属性 -->
<script src="/static/js/your_script.js"></script>

JS代码示例 #

const selectEl = document.getElementById('user-select');
const userList = JSON.parse(selectEl.dataset.users);
// 后续渲染逻辑和方法1一致

方法3：异步接口获取（适合大数据量/需要动态刷新的场景） #

如果用户数据量很大、或者下拉框需要根据其他条件动态刷新，就用独立的接口返回用户数据。

后端接口代码示例 #

@app.route('/api/get_users')
def get_users():
    users = User.query.with_entities(User.id, User.username).all()
    user_data = [{"id": u.id, "name": u.username} for u in users]
    # Flask 2.0+ 支持直接返回字典自动转为JSON响应
    return {"code": 0, "data": user_data}

JS代码示例 #

fetch('/api/get_users')
  .then(response => response.json())
  .then(res => {
    const userList = res.data;
    const selectEl = document.getElementById('user-select');
    // 渲染下拉框逻辑和方法1一致
    userList.forEach(user => {
      const option = document.createElement('option');
      option.value = user.id;
      option.innerText = user.name;
      selectEl.appendChild(option);
    });
  });

注意事项 #

• 前两种方案传递数据时，不要手动拼接JSON字符串，用Python内置的json.dumps序列化可以自动处理特殊字符转义，配合Jinja2的safe过滤器即可避免XSS风险。
• 如果用户数据包含敏感信息，异步接口必须加权限校验，避免未授权访问泄露数据。
• 数据量超过1000条时不建议用前两种注入方案，会拖慢页面首次加载速度，优先用异步接口加分页/懒加载优化。

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