Flask传递数据至JavaScript变量报错求助：Uncaught TypeError

你的代码存在三个核心问题，导致了Uncaught TypeError: Cannot read properties of null (reading 'value')错误：

• Flask的POST路由没有将数据传递给模板，HTML里的{{pr_data}}未被渲染，DOM元素的属性值无效
• <div>元素没有value属性，使用.value获取属性必然报错
• 直接渲染Python字典不会生成合法JSON，后续JS解析会失败

下面是两种可行的解决方法：

方法一：模板渲染直接注入数据 #

修改Flask代码 #

将路由改为GET，把字典转成JSON字符串后传递给模板：

from flask import Flask, render_template
import json

app = Flask(__name__)

@app.route('/')
def index():
    pr_data = {'pr_data': ['toyota', 'vw', 'GMC']}
    # 把Python字典转为JSON字符串，确保格式合法
    return render_template('index.html', pr_data=json.dumps(pr_data))

HTML与JavaScript代码 #

方式1：直接注入到JS变量

<script>
// 使用safe过滤器避免Flask转义JSON字符
var pr_data = JSON.parse('{{ pr_data|safe }}');
console.log(pr_data); // 输出: {pr_data: ['toyota', 'vw', 'GMC']}
</script>

方式2：通过data属性读取

<div id="pr_data" data-pr-data="{{ pr_data|safe }}"></div>

<script>
var prDataElement = document.getElementById('pr_data');
// 用dataset访问data-*属性，注意驼峰命名（data-pr-data对应dataset.prData）
var pr_data = JSON.parse(prDataElement.dataset.prData);
console.log(pr_data);
</script>

方法二：AJAX请求获取POST接口数据 #

如果需要保留POST接口，用原生fetch发起请求：

Flask代码（保留原路由） #

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/data', methods=['POST'])
def get_d():
    pr_data = {'pr_data': ['toyota', 'vw', 'GMC']}
    return jsonify(pr_data)

JavaScript代码 #

fetch('/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
        // 如果启用了Flask-WTF的CSRF保护，需要添加CSRF Token到headers
    }
})
.then(response => response.json())
.then(data => {
    var pr_data = data.pr_data;
    console.log(pr_data); // 输出: ['toyota', 'vw', 'GMC']
})
.catch(err => console.error('请求失败:', err));

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