如何用Ajax从Python Flask服务器重复获取数据？解决$未定义问题

错误原因 #

控制台提示$ in $.ajax is not defined，是因为前端代码使用了jQuery的$变量，但页面未加载jQuery库，同时原Ajax代码还存在语法错误（缺少包裹对象的括号、参数间逗号缺失）。

解决方案 #

方案1：引入jQuery并修正Ajax代码 #

首先在HTML页面的<head>或<body>末尾引入jQuery库：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后修正前端Ajax代码，补全语法并实现步骤展示：

// 假设页面有用于显示步骤的元素：<div id="stage-display"></div>
var stageDisplay = document.getElementById('stage-display');

var x = setInterval(function() {
  $.ajax({
    url: "/stage",
    type: "GET",
    dataType: "json",
    success: function(data) {
      stageDisplay.textContent = `当前分析步骤：第${data}步`;
      // 假设总共有4个步骤，完成后停止轮询
      if (data >= 4) {
        clearInterval(x);
        stageDisplay.textContent = "分析完成！";
      }
    },
    error: function(errMsg) {
      console.error("获取步骤失败：", errMsg);
    }
  });
}, 1000);

同时建议修改后端stage路由，返回标准JSON格式（避免前端解析异常）：

from flask import jsonify

@app.route("/stage", methods = ["GET"])
def stage():
    global stages
    return jsonify(stages)

方案2：使用原生JavaScript（无需依赖jQuery） #

如果不想引入jQuery，可使用原生fetch API实现轮询，更轻量：

var stageDisplay = document.getElementById('stage-display');

var x = setInterval(async function() {
  try {
    const response = await fetch("/stage");
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    // 解析后端返回的步骤数据
    const stage = parseInt(await response.text());
    stageDisplay.textContent = `当前分析步骤：第${stage}步`;
    // 步骤完成后停止轮询
    if (stage >= 4) {
      clearInterval(x);
      stageDisplay.textContent = "分析完成！";
    }
  } catch (err) {
    console.error("获取步骤失败：", err);
  }
}, 1000);

若后端返回JSON格式，前端解析可简化：

# 后端修改为返回JSON结构
from flask import jsonify

@app.route("/stage", methods = ["GET"])
def stage():
    global stages
    return jsonify(current_stage=stages)

前端对应解析部分改为：

const data = await response.json();
const stage = data.current_stage;

额外注意事项 #

• 全局变量stages在多用户场景下会出现冲突：多个用户同时发起分析请求时，stages会被所有请求共享，导致步骤显示混乱。建议改用用户会话（session）或者为每个分析任务生成唯一ID，关联独立的步骤状态。
• 可根据实际分析步骤的耗时调整轮询间隔，避免过于频繁的请求占用服务器资源。

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