Django如何实现仅更新部分内容而无需重载整个页面？

你当前的代码采用传统同步表单提交逻辑，后端返回完整HTML页面时浏览器会自动重载整页，要实现仅更新变动元素的效果，采用AJAX异步请求+局部DOM替换的方案即可实现，具体落地步骤如下：

1. 调整后端视图逻辑 #

区分普通页面访问和异步请求，异步请求不再返回完整页面，仅返回业务数据或者HTML片段：

from django.http import JsonResponse

def test(request):
    # 识别AJAX POST请求
    if request.method == 'POST' and request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        # 此处可写入你的业务逻辑，比如待办条目入库、参数校验等
        return JsonResponse({
            'status': 'success',
            'new_todo': '新添加的待办条目内容'
        })
    # 普通GET请求返回完整页面
    return render(request, 'users/register.html')

2. 前端添加异步交互逻辑 #

在users/register.html模板中添加对应DOM容器和JS代码，拦截提交动作，发起异步请求后仅更新目标区域的内容：
首先在页面中定义待更新的容器和操作按钮：

<!-- 页面内置CSRF Token，避免Django拦截POST请求 -->
{% csrf_token %}

<!-- 待更新的待办列表容器 -->
<ul id="todo-container"></ul>

<!-- 触发添加操作的按钮 -->
<button id="add-btn">添加新待办</button>

添加原生JS实现异步请求和局部更新，无需引入额外依赖：

document.querySelector('#add-btn').addEventListener('click', function(event) {
    // 阻止默认提交行为，避免整页刷新
    event.preventDefault();

    // 发起异步POST请求
    fetch(window.location.href, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json'
        },
        // 若需要传递用户输入内容，可在此处传入对应参数
        body: JSON.stringify({
            todo_content: '用户输入的待办内容'
        })
    })
    .then(response => response.json())
    .then(res => {
        if (res.status === 'success') {
            // 仅更新待办列表节点，不会重载整页
            const newItem = document.createElement('li');
            newItem.innerText = res.new_todo;
            document.querySelector('#todo-container').appendChild(newItem);
        }
    })
})

可选简化方案 #

如果不想编写大量JS代码，可以使用HTMX工具，仅需要给元素添加属性即可实现无刷新更新，后端只需返回对应HTML片段，HTMX会自动完成请求发起和DOM替换操作。

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