Flask传递JSON至前端点击按钮显示undefined问题求助

我来帮你搞定这个问题！从你描述的情况来看，核心问题是Jinja2模板渲染时，把你传递的JSON字符串做了转义，导致JS没办法正确识别成可操作的数据，所以点击按钮时拿不到正确的值。下面分步骤给你解决：

第一步：确认后端app.py代码正确性 #

首先确保你是用json.dumps把Python字典转成标准JSON字符串，代码示例如下：

from flask import Flask, render_template
import json

app = Flask(__name__)

@app.route('/')
def test_page():
    Marks = {"Math": 90, "English": 85, "Science": 92}
    # 将Python字典转为JSON字符串
    data = json.dumps(Marks)
    return render_template('test1.html', data=data)

这一步你应该已经做对了，毕竟h1标签能正常渲染{{data}}，说明数据已经成功传递到前端。

第二步：修改前端HTML的JS代码 #

问题出在JS调用gfg_Run函数时，没有正确处理后端传来的JSON数据。Jinja2默认会对字符串里的特殊字符（比如引号）做转义，直接用{{data}}会得到一个转义后的字符串，而非JS可识别的对象，因此出现undefined。这里有两种靠谱的解决方法：

方法一：直接渲染成JS对象（推荐，适合需要操作数据的场景） #

用Jinja2的safe过滤器，告诉模板不要转义这个JSON内容，渲染后直接成为JS可识别的对象：

<h1>{{ data }}</h1>
<button onclick="gfg_Run()">点击展示JSON</button>
<div id="display-area"></div>

<script>
// 用safe过滤器让Jinja直接输出JSON结构，转为JS可操作的对象
const studentMarks = {{ data|safe }};

function gfg_Run() {
    // 格式化并展示JSON字符串
    const formattedJson = JSON.stringify(studentMarks, null, 2);
    document.getElementById('display-area').textContent = formattedJson;
    
    // 也可以直接操作对象属性，比如 console.log(studentMarks.Math)
}
</script>

方法二：先获取转义后的字符串，再解析成JS对象（适合保留原始JSON字符串的场景） #

如果你需要先拿到原始JSON字符串，再解析成对象，可以用escapejs过滤器处理引号转义（避免JS语法错误），再用JSON.parse解析：

<h1>{{ data }}</h1>
<button onclick="gfg_Run()">点击展示JSON</button>
<div id="display-area"></div>

<script>
// 用escapejs处理字符串中的引号，避免JS语法报错
const jsonString = "{{ data|escapejs }}";
// 将字符串解析为JS对象
const studentMarks = JSON.parse(jsonString);

function gfg_Run() {
    // 直接展示原始JSON字符串
    document.getElementById('display-area').textContent = jsonString;
    // 或者展示格式化后的内容：JSON.stringify(studentMarks, null, 2)
}
</script>

为什么之前会出现undefined？ #

你提到注释的代码能正常打印JS对象，那应该是你之前直接在JS里写了const obj = {"Math":90...}这种对象字面量。而Jinja渲染{{data}}时，默认会把双引号转成"，最终JS里的内容变成了"{"Math":90...}"——这是一个普通字符串，不是对象，所以当你尝试把它当对象使用时，就会出现undefined。用safe或者escapejs+JSON.parse就能解决这个转义问题。

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