如何将Flask应用中的变量传递到JavaScript文件

问题汇总 #

你的代码存在3个核心错误，按优先级排序如下：

1. app.js未正确加载
   index.html中引入外部JS的script标签缺失src属性，浏览器不会主动加载对应的app.js文件，调用myFunc时函数不存在，自然没有输出，也可能静默报错。
   错误写法：

<script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>

修正后：

<script type="text/javascript" src="{{ url_for('static', filename='app.js')}}"></script>

2. 后端传递的列表未正确序列化为JS可识别的数组
   你直接用var data = '{{ items }}'的写法，实际渲染后得到的是字符串类型的"['backpack', 'handbag', 'laptop']"，不是JS数组，循环data.length时遍历的是每个字符而不是列表元素。
   修正写法：

var data = {{ items|tojson }}

不需要加引号，Flask的tojson过滤器会直接把Python列表转换为合法的JS数组格式。

3. JS渲染表格的逻辑错误
   你现在的代码把表头和所有数据都插入到了同一行，而且row变量未声明作用域。修正后的myFunc逻辑如下：

function myFunc(data) {
    var table = document.createElement("table");
    // 插入表头行
    var headerRow = table.insertRow(-1);
    var headerCell = headerRow.insertCell(-1);
    headerCell.innerHTML = 'Item';
    // 循环数据插入新行
    for (var i = 0; i < data.length; i++) {
        var row = table.insertRow(-1);
        var cell = row.insertCell(-1);
        cell.innerHTML = data[i];
    }
    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);
}

按以上三点修正后即可正常渲染表格。

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