Django无需重载全页定时局部刷新div 避免内容重复加载问题咨询

问题根因 #

• 现有AJAX使用append()方法，仅追加内容不会清空旧内容，直接导致div节点重复
• 视图返回的是完整页面模板，而非需要刷新的局部HTML片段，就算做内容替换也会出现页面结构嵌套错误
• 两套AJAX逻辑冲突（一套5秒刷新#testdiv、一套15秒替换整个body），会导致页面逻辑完全混乱

修复步骤 #

第一步：拆分局部刷新用的模板片段 #

新建专门存放待刷新内容的子模板，比如templates/partials/dash_stats.html，内容仅保留你需要动态更新的部分：

<div class="col-md-4">
    {%if testtt > 1000 %}<div class="dashcontrol2 featured">{%else%}<div class="dashcontrol featured">{%endif%}
    <h4>{%if testtt > 1000 %}<span style="color: red;">XX</span><box-icon type='solid' name='badge' color="red"></box-icon>{%else%}<span style="color: green;">XX</span><box-icon type='solid' name='badge-check' color="green"></box-icon>{%endif%}</h4>
    <h4>{{testtt|intcomma}}</h4>
    <a target="_blank" href="XX"><h6>KIBANA</h6></a>
    </div>
</div>

修改主模板dashcontrol.html里的#testdiv部分，直接引入这个子模板：

<div id="testdiv" class="row">
    {% include 'partials/dash_stats.html' %}
</div>

第二步：修改视图逻辑，区分普通请求和AJAX请求 #

在视图里加判断，AJAX请求仅返回局部模板片段，普通访问才返回完整页面：

from django.http import HttpRequest
def dashcontrol(request: HttpRequest):
    url = "http://XX/XX*/_search"
    headers = {'Content-type': 'application/json'}
    params = {XX}
    response = requests.get(url=url, json=params, headers=headers)
    data = response.json()
    testtt = data['hits']['total']
    # 判断是否为AJAX请求，返回对应内容
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        return render(request, 'partials/dash_stats.html', {'testtt': testtt})
    # 普通页面访问返回完整模板
    return render(request, 'dashcontrol.html', {'testtt': testtt})

第三步：修正AJAX代码，替换而非追加内容 #

删除原有两套重复的setInterval代码，仅保留一套即可，使用html()方法直接替换#testdiv的全部内容，自动清空旧内容：

setInterval(function() { 
    $.get("/dashcontrol", function(data, status){ 
        // html()会直接覆盖目标节点的所有内容，无需额外清空/隐藏操作
        $("#testdiv").html(data); 
    });  
}, 10000); // 10秒刷新对应10000毫秒，可自行调整

可选优化 #

• 可以在请求过程中加简单的加载状态提示，避免用户以为页面无响应
• 可以增加请求异常捕获逻辑，接口出错时给出提示避免页面一直无更新

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