如何用Ajax、Django及DRF实现模板中客户名称列表无刷新更新

嘿，看起来你已经成功通过Ajax拿到后端数据了，这已经完成了一大半！现在问题是要把新数据动态渲染到页面上，不用刷新整个页面对吧？我来给你一步步解决这个问题：

1. 先优化CSS样式（可选但推荐） #

你现在把样式写在循环的模板标签里，每次渲染都会重复生成相同的style代码，不仅冗余还不好维护。把这部分样式移到全局的CSS文件里：

#update ul li a {
    text-decoration: none;
    color: #B1EBF9;
    font-size: 1em;
    outline: 0;
}

这样所有列表项的链接都会自动应用这个样式，不用每次动态生成元素都重复写样式。

2. 修改模板，给列表容器加唯一ID #

为了让JavaScript能精准找到要更新的列表，给你的<ul>标签加一个ID：

<div id ="update">
    <div id="dash1div">
        <a href="">
            <strong>Updates</strong>
        </a>
    </div>
    <!-- 给ul添加id，方便JS定位 -->
    <ul id="update-list">
        {% for update_info in update_info %}
        <li>
            <a id="{{update_info.nome_cliente}}" href="/dashboard/ListUpdate/{{update_info.nome_cliente}}/">{{update_info.nome_cliente}}</a>
        </li>
        {% endfor %}
    </ul>
</div>

3. 完善Ajax的success回调函数 #

现在你的Ajax只是打印数据，没有处理渲染逻辑。我们要在success里拿到返回的update_info数据，然后动态生成新的列表项替换掉旧内容：

setInterval(function(){ 
    console.log('Data passed:'); 
    $.ajax({ 
        url: '/dashboard/ajax/reload_data/', 
        // 明确指定预期返回JSON格式，避免自动解析问题
        dataType: 'json',
        success: function (data){ 
            console.log(data);
            // 从返回数据中取出更新信息数组
            const updates = data.update_info;
            // 获取页面上的列表容器
            const updateList = $('#update-list');
            // 清空现有列表内容
            updateList.empty();
            // 循环遍历每个更新项，生成新的列表元素
            updates.forEach(function(update) {
                // 创建链接元素
                const link = $('<a>')
                    .attr('id', update.nome_cliente)
                    .attr('href', `/dashboard/ListUpdate/${update.nome_cliente}/`)
                    .text(update.nome_cliente);
                // 创建列表项并把链接加进去
                const listItem = $('<li>').append(link);
                // 把新的列表项添加到容器里
                updateList.append(listItem);
            });
        },
        error: function(xhr, status, error) {
            // 可选：添加错误处理，方便调试
            console.error('Ajax请求出错:', error);
        }
    }); 
},10000);

4. 优化后端视图（可选但更规范） #

注意request.is_ajax()在Django 3.1及以上版本已经被弃用了，改用请求头判断更兼容；另外用JsonResponse代替手动序列化+HttpResponse会更简洁：

from django.http import JsonResponse, Http404

def reload_data(request):
    # 替换is_ajax()，判断是否为Ajax请求
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # order_by('-end_time') 和 reverse()效果一样，更直观
        b = Jobs.objects.order_by('-end_time')[:10]
        u = Update.objects.values('nome_cliente').distinct()
        serializerB = JobsSerializer(b, many=True)
        serializerU = UpdateSerializer(u, many=True)
        content = {
            "backup_info": serializerB.data,
            "update_info": serializerU.data
        }
        # 直接返回JsonResponse，自动处理JSON序列化和Content-Type
        return JsonResponse(content)
    else:
        raise Http404

这样修改后，每10秒Ajax就会拉取新数据，然后动态更新页面上的客户名称列表，不用刷新整个页面啦！

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