Django中JS发送POST请求后页面未自动显示更新内容

核心原因 #

你用fetch发送的是AJAX异步请求，后端返回的redirect("/")只会被fetch接收为普通响应，浏览器不会自动触发页面跳转。而且当前代码既没有处理fetch的响应，也没有主动更新前端DOM或刷新页面，所以旧标签还留在页面上。

解决方案 #

有两种常用处理方式，按需选择：

方式1：请求成功后手动刷新页面 #

修改test函数，在请求成功后触发页面刷新，加载最新内容：

function test(tagValue) {
    var csrftoken = getCookie('csrftoken')
    fetch('deleteTag', {
        method: 'POST',
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrftoken,
        },
        body: tagValue
    })
    .then(response => {
        // 请求成功后刷新当前页面
        window.location.reload();
    })
    .catch(error => {
        console.error('删除标签失败:', error);
    });
    // 返回false阻止input的默认提交行为
    return false;
}

同时修改removeTag函数，确保onclick不会触发默认动作：

function removeTag(removeSymbolDivForTagToRemove) {
    tagElement = removeSymbolDivForTagToRemove.parentElement
    tagValue = tagElement.querySelector('button[name="tagInTagsMenu"]').value
    console.log(tagValue)
    if (window.confirm(`确定要删除标签 ${tagValue} 吗？`)) {
        test(tagValue)
        return false;
    }
    return false;
}

方式2：不刷新页面，直接删除前端DOM元素 #

如果想实现无刷新体验，请求成功后直接移除对应标签的DOM元素：

function removeTag(removeSymbolDivForTagToRemove) {
    const tagElement = removeSymbolDivForTagToRemove.parentElement;
    const tagValue = tagElement.querySelector('button[name="tagInTagsMenu"]').value;
    
    if (window.confirm(`确定要删除标签 ${tagValue} 吗？`)) {
        var csrftoken = getCookie('csrftoken');
        fetch('deleteTag', {
            method: 'POST',
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                "X-CSRFToken": csrftoken,
            },
            body: tagValue
        })
        .then(response => {
            if (response.ok) {
                // 请求成功，直接删除页面上的标签元素
                tagElement.remove();
            } else {
                alert('删除标签失败，请重试');
            }
        })
        .catch(error => {
            console.error('删除标签失败:', error);
            alert('删除标签失败，请重试');
        });
    }
    return false;
}

这种方式可以删掉单独的test函数，同时后端的deleteTag视图可以改为返回JSON响应（不用重定向）：

from django.http import JsonResponse

def deleteTag(request):
    tagName = request.body.decode('utf-8')
    Tag.objects.filter(name=tagName).delete()
    loadTagsFromModel()
    return JsonResponse({'status': 'success'})

额外注意事项 #

• 原代码中test函数无返回值，removeTag里的return test(tagValue)实际返回undefined，可能触发input标签的默认提交行为，所以必须在removeTag里返回false阻止默认动作。
• 后端的tags如果是全局变量，多用户场景下会出问题，建议每次请求都从数据库获取最新数据（main视图里的loadTagsFromModel()已经做了这件事，确保渲染的是最新内容）。

内容的提问来源于stack exchange，提问作者Mads Lildholdt Hansen