如何通过AJAX将Flask中的yearCount变量传递给独立JavaScript文件

方案1：直接在模板注入数据（无需额外AJAX请求，性能最优） #

因为你渲染dashboard.html的时候已经把yearCount传给模板了，完全可以直接把数据注入到页面的JS上下文里，不需要额外发AJAX请求。
首先在你的dashboard.html的<script>标签里添加如下代码：

<script>
// 直接通过Jinja2过滤器把Python变量转成JS可识别的JSON格式
const yearCount = {{ yearCount | tojson | safe }};
// 后续直接用yearCount变量即可，不需要再发AJAX请求
console.log(yearCount);
</script>

这种方式不需要修改你的Flask视图代码，也不需要额外的网络请求，是最适合你当前场景的方案。

方案2：通过AJAX请求获取数据（需要调整Flask视图逻辑） #

如果你确实需要通过AJAX异步获取数据，可以按照如下步骤修改：

第一步：修改Flask的app.py代码 #

首先修正你原有代码里的语法错误（路由装饰器末尾多余的分号），同时添加判断逻辑，区分普通页面请求和AJAX请求：

from flask import jsonify, request, render_template

# 去掉原装饰器末尾的多余分号
@app.route("/dashboard", methods=["GET","POST"])
def dashboard():
    yearCount = [{"year":2022, "count":100}, {"year":2023, "count":200}] # 你的示例数据
    # 判断是否是AJAX请求
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # AJAX请求直接返回JSON格式的yearCount
        return jsonify(yearCount)
    # 普通页面请求返回渲染后的HTML
    return render_template("dashboard.html", yearCount=yearCount)

第二步：修改你的AJAX代码 #

在success回调里接收后端返回的JSON数据即可：

$.ajax({
  url: '/dashboard',
  type: "GET",
  dataType: "json", // 明确指定接收JSON格式数据
  success: function(data) {
    // data就是后端返回的yearCount数据
    console.log("获取到的yearCount数据：", data);
  }
});

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