Django POST提交后不跳转API页直接更新表格数据实现方案

• 前端用了原生表单默认提交逻辑，提交后浏览器会直接跳转到接口响应页，不会停留在当前页做局部更新
• 后端接口逻辑存在冗余：先手动修改sessions字段执行了一次save()，后续调用序列化器save()会重复触发数据库更新，且当前返回JsonResponse不符合你需要渲染模板片段的需求
• 没有做局部刷新逻辑，数据更新后必须手动回退、刷新页面才能拉取到最新内容

1. 调整后端接口代码 #

去掉重复的保存逻辑，校验通过后直接返回渲染好的表格模板片段即可，修正后代码如下：

@api_view(['POST'])
def sRd(request, pk):
    sw = get_object_or_404(Swimmers, id=pk)
    # 合并要更新的字段，避免重复操作数据库
    update_payload = request.data.copy()
    update_payload['sessions'] = sw.sessions + 10
    # 用partial=True支持局部更新，不会覆盖未传入的其他字段
    serializer = SubSerializer(instance=sw, data=update_payload, partial=True)
    if serializer.is_valid():
        serializer.save()
        # 直接返回渲染完成的表格片段，不再返回JSON
        return render(request, 'accounts/modals/swimming/_vw_table.html', {'sw': sw})
    return JsonResponse(data=serializer.errors, status=status.HTTP_400_BAD_REQUEST)

2. 前端拦截默认提交行为，实现无刷新局部更新 #

给表单绑定提交事件，阻止默认跳转逻辑，用异步请求提交数据，拿到后端返回的表格HTML后直接替换页面上的表格区域即可，示例代码如下：

<!-- 给表格套一层固定容器，方便后续替换内容 -->
<div id="sw-table-wrap">
    {% include 'accounts/modals/swimming/_vw_table.html' %}
</div>

<!-- 给提交表单加标识，注意不要去掉csrf_token -->
<form id="add-session-form" method="POST" action="{% url '此处替换为你sRd接口的路由别名' sw.id %}">
    {% csrf_token %}
    <!-- 其他表单字段按原有逻辑保留 -->
    <button type="submit" class="btn">增加10次训练</button>
</form>

<script>
const form = document.getElementById('add-session-form');
form.addEventListener('submit', function(e) {
    // 核心：阻止浏览器默认的表单跳转行为
    e.preventDefault();
    // 发送异步POST请求
    fetch(form.action, {
        method: 'POST',
        body: new FormData(form),
        headers: {'X-Requested-With': 'XMLHttpRequest'}
    })
    .then(res => {
        if (!res.ok) throw new Error('请求异常');
        return res.text();
    })
    .then(tableHtml => {
        // 用返回的新表格直接替换旧内容，无需刷新页面
        document.getElementById('sw-table-wrap').innerHTML = tableHtml;
    })
    .catch(err => {
        alert('操作失败，请重试');
        console.error(err);
    })
</script>

• 必须保留表单内的{% csrf_token %}标签，否则Django会拦截POST请求返回403错误
• 如果项目中已经引入了jQuery/axios等请求库，把原生fetch替换成对应库的请求方法即可，核心逻辑不变
• 不要在序列化器校验前手动修改模型对象执行save()，会触发两次数据库写操作，带来不必要的性能开销

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