Flask/Python项目中如何将数组数据填充显示到对应文本框

实现方案 #

1. 后端接口调整 #

优先让Flask的/update_decimal接口直接返回一维数组格式，避免前端再做字符串切割处理，降低出错概率，参考代码：

from flask import jsonify
import sqlite3

@app.route('/update_decimal')
def update_decimal():
    conn = sqlite3.connect('你的数据库路径.db')
    cur = conn.cursor()
    # 替换为实际的查询语句
    cur.execute('SELECT 目标字段 FROM 表名')
    # 直接把查询结果转为一维数组
    res_arr = [item[0] for item in cur.fetchall()]
    conn.close()
    return jsonify(res_arr)

2. HTML模板修正 #

现有代码存在form标签嵌套、id重复、Jinja2语法错误的问题，修改后如下，利用Jinja2自带的loop变量生成带序号的id，方便后续JS匹配赋值：

<div>
   <form class="form-inline text-center justify-content-center">
       {% for value in rows %}
       <input class="form-control col-md-1 mb-2 mr-sm-2" 
              id="cell_{{ loop.index0 }}" 
              placeholder="Cell{{ loop.index }}" 
              readonly 
              type="text" 
              value="{{ value }}">
       {% endfor %}
   </form>
</div>

3. JavaScript逻辑修改 #

拿到后端返回的数组后，直接遍历给对应序号的文本框赋值即可：

$(function() {
    window.setInterval(function() {
        liveClock();
        loadNewDecimal();
    }, 1000);

    function loadNewDecimal() {
        $.ajax({
            url: "/update_decimal",
            type: "GET",
            dataType: "json",
            success: function(conv_arr) {
                // 遍历数组匹配对应文本框赋值
                conv_arr.forEach((val, idx) => {
                    $(`#cell_${idx}`).val(val);
                })
            }
        });
    };
})

注意事项 #

• 确保首次渲染时Jinja2生成的文本框数量和后端返回的数组长度一致，避免出现值无法匹配的问题
• 若对实时性要求不高，可适当调大setInterval的间隔时间，降低服务器压力

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