使用jQuery .load在Flask应用中更新Div片段失败，求解决方案

我来帮你搞定这个自动更新的问题，先拆解下当前代码里的关键问题，再一步步调整：

1. 先补上jQuery的引入（核心前提） #

你的index.html里没看到引入jQuery的代码，这会直接导致$( "#display" ).load()无法运行。先在页面的<head>标签里加上jQuery的引用：

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

（你也可以下载jQuery文件到本地项目里引入，两种方式都可以）

2. 新增专门返回更新片段的路由（优化逻辑） #

当前你用/index.html返回整个页面，虽然.load()能筛选出#display部分，但效率低还容易触发浏览器缓存。我们单独写一个路由来返回需要更新的内容：

修改routes.py，添加新路由：

@app.route('/display-content')
def display_content():
    # 这里可以放动态生成内容的逻辑，或者直接渲染一个片段模板
    return render_template('display_content.html')

然后创建display_content.html模板文件，只放需要更新的内容：

<h1>word 2</h1>

（之后你修改这个模板的内容，就能直接触发页面更新）

3. 调整前端脚本，解决缓存问题 #

浏览器会对GET请求做缓存，哪怕你改了模板，也可能加载旧内容。我们给请求URL加个时间戳参数，强制浏览器每次请求新内容：

修改index.html里的脚本和初始化内容：

<script>
function run() {
    // 时间戳参数避免缓存
    const timestamp = new Date().getTime();
    $( "#display" ).load( "/display-content?" + timestamp );
}
// 页面加载时先执行一次，再开始定时更新
run();
setInterval(run, 1000);
</script>
<div id="display">
    {% include 'display_content.html' %}
</div>

用{% include %}初始化页面加载时的内容，保证和后续更新的内容一致。

4. 测试验证 #

重启Flask应用，打开页面后，修改display_content.html里的内容（比如改成<h1>Updated content!</h1>），等待1秒就能看到#display区块自动更新了。

原方法失效的原因总结 #

• 缺少jQuery引入，导致$未定义，脚本根本无法执行
• 请求整个页面容易触发浏览器缓存，模板修改后无法实时获取新内容
• 用完整页面路由做片段更新，逻辑冗余且效率低

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