Django实现模板定时动态更新main-content区域板球实时比分方法

之前方案出现导航栏重复渲染、注入多余Bootstrap CDN的核心原因，是AJAX请求拉取了完整HTML页面，替换局部内容时会带入整页的头部、导航、静态资源引用。按以下步骤实现即可规避这些问题：

1. 拆分模板，提取动态更新片段 #

首先将id="main-content"区块内的比分内容单独抽离为独立模板片段，存储路径为LiveScores/partials/scores_content.html，文件内仅保留需要动态更新的代码，不包含html、head、body、导航栏等固定内容：

<div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{Team1}}</h5>
          <p class="card-text">{{RunRate}}</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{result}}</h5>
            <p class="card-text">{{situation}}</p>
          </div>
        </div>
      </div>
    <div class="col-sm-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{Team2}}</h5>
          <p class="card-text">* LIVE</p>
        </div>
      </div>
    </div>
</div>

修改原主模板display_scores.html，在main-content区块引入上述片段，同时添加定时更新的前端逻辑：

<html>
    <head>
        <title>{{MatchName}}</title>
        {% load static %}
        <!-- 保留原有所有静态资源引用，无需修改 -->
    </head>
    <body>
        <header>
          <!-- 保留原有导航栏代码，更新时不会改动这部分内容 -->
        </header>
        <section class="container" id="main-content">
            {% include 'LiveScores/partials/scores_content.html' %}
        </section>

        <script>
        // 比分更新方法
        function updateScores() {
            fetch('/api/get-live-scores/')
                .then(res => res.text())
                .then(htmlFragment => {
                    // 仅替换main-content内部内容，不影响页面其他固定部分
                    document.getElementById('main-content').innerHTML = htmlFragment;
                })
                .catch(err => console.error('比分更新失败:', err));
        }
        // 启动定时任务，示例间隔为30秒，可根据需求调整（单位为毫秒）
        setInterval(updateScores, 30000);
        </script>
    </body>
</html>

2. 新增局部内容接口 #

修改views.py，保留原有页面渲染逻辑，新增一个专门给AJAX调用的接口，仅返回渲染后的比分片段：

from django.http import HttpRequest, HttpResponse

def livescores():
    # 保留原有比分生成逻辑，无需修改
    return scores

def display_scores(request):
    # 保留原有整页渲染逻辑，无需修改
    scores = livescores()
    return render(request, 'LiveScores/display_scores.html', scores)

# 新增的局部比分接口
def get_live_scores(request: HttpRequest) -> HttpResponse:
    scores = livescores()
    # 仅渲染片段模板，不会返回头部、导航、CDN引用等多余内容
    return render(request, 'LiveScores/partials/scores_content.html', scores)

3. 配置路由 #

在应用的urls.py中为新增接口添加路由映射：

from django.urls import path
from . import views

urlpatterns = [
    # 原有比分页面路由，保留不动
    path('scores/', views.display_scores, name='display_scores'),
    # 新增的局部数据接口路由
    path('api/get-live-scores/', views.get_live_scores, name='get_live_scores'),
]

注意事项 #

• 定时更新间隔建议不短于10秒，避免请求过于频繁给服务器造成不必要的压力
• 如果需要更优的用户体验，可以在请求过程中添加加载状态提示、请求失败自动重试逻辑
• 禁止在AJAX对应的接口中渲染完整页面，这是之前出现重复渲染、多余资源注入问题的根本原因

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