基于Flask与Ajax实现页面自动刷新失败问题排查

核心问题分析 #

你的代码存在三个关键问题，导致Ajax无法自动更新页面数值：

• Python端缺少random模块导入：后端random.randrange调用会触发未定义错误，导致/rand接口返回500状态码，前端拿不到有效数据。
• DOM元素获取时机错误：如果script标签写在页面<body>元素之前，执行document.getElementById("bar")时目标元素还未加载，bar变量会是null，后续赋值操作无效。
• 错误处理缺失：没有在Ajax的error回调里添加日志或提示，无法及时发现后端接口的错误。

修正后的完整代码 #

Python后端代码 #

from flask import Flask, render_template
import random  # 必须导入random模块

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route("/rand", methods=['GET'])
def random_number():
    return f"{random.randrange(0, 100)}"

if __name__== '__main__':
    app.run(debug=True)

HTML前端代码 #

<body>
  <!-- 确保存在id为bar的目标元素，示例用input，也可替换为span/div -->
  <input type="text" id="bar">

  <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
  <script>
    // 等待DOM完全加载后再执行逻辑
    $(document).ready(function() {
      var bar = document.getElementById("bar");
      setInterval(function(){
          $.ajax({
            url: "/rand",
            type: "get",
            success: function(response) {
              // 若用span/div，替换为 bar.textContent = response;
              bar.value = response;
             },
            error: function(xhr) {
                console.log("请求出错：", xhr.statusText);
                alert("获取随机数失败，请检查后端服务");
            }
          }); 
      }, 1000);
    });
  </script>
</body>

额外注意事项 #

• 确认前端页面中存在id="bar"的元素，不同类型元素的赋值方式有区别：输入框用.value，文本元素（span/div）用.textContent。
• Flask开启debug模式后，可通过终端查看后端错误日志，快速定位接口问题。

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