Ajax调用后网页无响应，基于Flask更新Chart.js图表问题求助

安全阿岳

2026-9-26

问题原因&修复方案

1. AJAX选择器拼写错误

你的目标容器id是cate-trend，但AJAX成功回调里写的是$("#cate-tend")，少写了字母r，导致替换逻辑根本找不到目标元素，原有逻辑失效。

2. Flask返回值格式不匹配

你用jsonify('', html)返回的是一个长度为2的数组，前端直接把整个数组当HTML插入肯定会出错。如果不需要返回其他额外参数，直接返回HTML字符串即可，不需要包jsonify。

3. 旧Chart实例未销毁

每次更新图表前没有销毁之前创建的Chart.js实例，重复实例化相同id的canvas会导致内存泄漏、页面卡顿无响应。

4. 模板内JSON解析重复转义

你在Flask层已经对数据做了json.dumps，传到模板后又用了|tojson过滤器，相当于二次转义，JSON.parse执行会直接报错，阻塞JS运行。

5. 表单事件绑定不严谨

绑定提交按钮的点击事件不如直接绑定表单的submit事件，避免用户回车提交表单时逻辑不触发的问题。

修正后的代码

AJAX代码修正

// 先在全局定义变量保存Chart实例，方便销毁
let cateTrendChart = null;

// 绑定form的submit事件，而不是按钮的click事件
$("#form2").on("submit", function(e){
    e.preventDefault();
    console.log("hit here");
    const year =  $("#select-year-popularity").val();
    const cate = $("#select-category").val();
    $.ajax({
        url: "/update_cate_trend",
        type: "POST",
        data:{year:year, cate:cate},
        success: function (response) {
            // 先销毁旧的图表实例
            if(cateTrendChart) {
                cateTrendChart.destroy();
            }
            // 选择器修正为正确的id
            $("#cate-trend").replaceWith(response);
        }
   });
});

Flask代码修正

@app.route("/update_cate_trend", methods=["POST"])
def update_trend():
    year = request.form.get("year")
    cate = request.form.get("cate")
    print(year)
    print(cate)
    df_pop_cate = get_cate_popularity(year, cate)
    months_cate_trend = df_pop_cate.iloc[:, 0].tolist()
    sales_cate_trend = df_pop_cate.iloc[:, 1].tolist()
    html = render_template(
        "update_cate_trend.html",
        months_cate_trend=months_cate_trend, # 不需要提前json.dumps，交给模板过滤器处理
        sales_cate_trend=sales_cate_trend
    )
    # 直接返回HTML字符串，不需要jsonify
    return html

新图表模板代码修正

<div id="cate-trend">
    <canvas id="product-popularity-trend"></canvas>
    <script>
    // 去掉重复的JSON.parse，直接用tojson过滤器输出即可
    let months_cate_trend_data = {{ months_cate_trend | tojson}};
    let sales_cate_trend_data = {{ sales_cate_trend | tojson }};
    console.log("hit");

    // 把实例赋值给全局变量，方便下次更新前销毁
    cateTrendChart = new Chart(document.getElementById("product-popularity-trend"), {
        type : 'line',
        data: {
          labels: months_cate_trend_data,
          datasets: [
            {
              label: "Category Sales",
              data: sales_cate_trend_data
            }
          ]
        },
        options: {
            title: {
                display: true,
                text: 'chart title'
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        drawOnChartArea: false,
                        drawBorder: false,
                    },
                    ticks: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        drawOnChartArea: false,
                        drawBorder: false,
                    },
                    ticks: {
                        display: false
                    }
                }]
            }
        }

    });
    </script>
</div>

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