Django中Ajax删除记录后需手动刷新才消失的问题求助

问题现象 #

使用Ajax结合Sweetalert2删除数据库记录时，记录已成功从数据库移除，但页面表格中的对应行仍显示，需手动刷新页面才会消失。尝试过将视图改为重定向到列表页，问题依旧。

核心原因 #

1. 异步逻辑顺序错误：原代码中删除成功的提示弹窗在Ajax请求发送后立即执行，而非等待Ajax请求完成，且没有编写删除页面表格行的代码。
2. 重定向不适用于Ajax场景：当用Ajax请求时，服务器返回redirect不会触发页面跳转，Ajax只会接收跳转目标页面的HTML内容，无法自动刷新当前列表页。
3. HTML模板存在变量错误：模板中判断状态时误用了service.status，实际应为dog.status。

解决方案步骤 #

1. 修复HTML模板中的变量错误 #

找到状态判断的elif分支，将service.status改为dog.status：

{% elif dog.status == "INACTIVE"%}
  <td class="text-center">
    <span class="badge text-bg-danger" style="font-size:0.7em;">{{ dog.status }}</span>
  </td>
{% endif %}

2. 调整JavaScript的异步逻辑 #

修改Ajax请求的处理逻辑，确保在删除成功后再更新DOM（移除对应表格行）并弹出成功提示，同时处理作用域问题：

$(document).ready(function() {
    let csrftoken = '{{ csrf_token }}'

    $('.DeleteButton').click(function(){
        // 保存当前按钮的上下文，避免Ajax回调中this指向变化
        const $deleteBtn = $(this);
        
        Swal.fire({
            title: "确定要删除吗？",
            text: "删除后无法恢复！",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "是的，删除它！"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "POST",
                    headers:{'X-CSRFToken': csrftoken},
                    url: $deleteBtn.attr('data-url'),
                    dataType: 'json',
                    success: () => {
                        // 移除当前按钮所在的表格行
                        $deleteBtn.closest('tr').remove();
                        // 删除成功后弹出提示
                        Swal.fire({
                            title: "已删除！",
                            text: "记录已成功删除。",
                            icon: "success"
                        });
                    },
                    error: (error) => {
                        console.log(error);
                        // 删除失败时提示错误
                        Swal.fire({
                            title: "出错了！",
                            text: "删除失败，请重试。",
                            icon: "error"
                        });
                    } 
                });
            }
        });
    });
});

3. 保持视图返回JsonResponse（不要用redirect） #

视图继续使用返回空JsonResponse的版本，因为Ajax需要异步响应而非页面跳转：

def delete_record(request, id):
    obj = get_object_or_404(Dog, id=id)
    if request.method == 'POST':
        obj.delete()
        return JsonResponse({})

原理说明 #

• 通过closest('tr')找到删除按钮所在的表格行，调用remove()方法直接从DOM中移除，实现页面无刷新更新。
• 将成功提示放在Ajax的success回调中，确保只有当服务器确认删除成功后，才更新页面并提示用户。
• Ajax请求场景下，服务器返回重定向不会触发页面跳转，因此必须通过手动操作DOM来更新页面内容。

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