Django中指定div局部无刷新更新扫码数据失败如何解决

1. 修正前端JS定时器逻辑 #

原代码中setInterval(refresh(), seconds * 1000)写法错误，refresh()会立即执行函数，仅触发1次请求，不会定时循环调用，需改为传入函数引用。同时优化DOM解析逻辑避免节点提取失败：

<script>
// 需确保页面已引入jQuery依赖
function refresh() {
    $.ajax({
        url: "{% url 'detect_barcodes' %}",
        success: function (data) {
            // 将返回的HTML字符串解析为DOM对象后提取目标节点
            const newPageDom = $(new DOMParser().parseFromString(data, "text/html"));
            $('#container').replaceWith(newPageDom.find('#container'));
        }
    });
}
const refreshInterval = 3 * 1000;
// refresh后不加括号，传入函数引用
setInterval(refresh, refreshInterval);
</script>

2. 修复后端扫码数据不共享问题 #

原视图函数每次接收请求都会新建CameraStream实例，不同请求的实例互相独立，used_codes属性无法共享，导致拿不到最新的扫码数据。将实例移至视图外作为全局对象即可（生产环境建议改用Redis等缓存存储扫码数据，避免多进程部署下全局变量不共享的问题）：

# views.py 调整
# 将CameraStream实例初始化移到视图函数外部
stream = CameraStream()

@ms_identity_web.login_required
def detect(request):
    success, frame = stream.camera.read()
    status = bool(success)
    bar_codes = stream.used_codes
    data = ",\n".join(bar_codes)
    return render(request, 'detect_barcodes/detect.html', context={'data': data, 'cam_status': status})

3. 可选性能优化方案 #

原实现每次请求都返回完整HTML页面，资源消耗高，可单独新增接口仅返回扫码数据，直接更新文本框内容，无需替换整个DIV：

新增视图函数 #

# views.py 新增
from django.http import JsonResponse

@ms_identity_web.login_required
def get_latest_codes(request):
    bar_codes = stream.used_codes
    return JsonResponse({"data": ",\n".join(bar_codes)})

新增路由配置 #

# detect_barcodes/urls.py 新增
path('latest-codes/', get_latest_codes, name='latest_codes'),

替换前端刷新逻辑 #

<script>
function refresh() {
    $.ajax({
        url: "{% url 'latest_codes' %}",
        success: function (res) {
            // 直接更新textarea内容即可
            $('#description').val(res.data);
        }
    });
}
setInterval(refresh, 3000);
</script>

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