Django多页面表单切换时数据丢失问题求助

一、更优雅的页面切换保存方案 #

1. 表单提交+重定向（PRG模式） #

不用修改URL携带上一题ID，直接把导航栏的所有题目按钮都改成触发当前表单提交的操作：点击时先保存当前页面的表单数据，再重定向到目标题目页面，完全符合Django的Post/Redirect/Get（PRG）最佳实践，逻辑清晰易维护。

具体实现：

• 给当前页面的表单添加隐藏字段next_question_id，用来存储要跳转的目标题目ID
• 用JavaScript给每个导航按钮绑定点击事件，设置隐藏字段的值后提交表单
• 后端视图处理表单验证与保存，完成后根据next_question_id重定向到对应页面

前端示例代码：

<!-- 当前题目页面的表单 -->
<form id="question-form" method="post" action="{% url 'save_question' user.id current_question.id %}">
  {% csrf_token %}
  {{ form.as_p }}
  <input type="hidden" id="next-question" name="next_question_id" value="">
</form>

<!-- 导航栏题目按钮 -->
<button class="nav-btn" data-target-id="1">题目1</button>
<button class="nav-btn" data-target-id="2">题目2</button>

<script>
  document.querySelectorAll('.nav-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementById('next-question').value = this.dataset.targetId;
      document.getElementById('question-form').submit();
    });
  });
</script>

后端视图示例：

from django.shortcuts import redirect, get_object_or_404
from django.contrib.auth.decorators import login_required
from .models import UserQuestionAnswer
from .forms import QuestionForm

@login_required
def save_question(request, user_id, question_id):
    user = request.user
    question = get_object_or_404(Question, id=question_id)
    answer_instance = get_object_or_404(UserQuestionAnswer, user=user, question=question)
    
    if request.method == 'POST':
        form = QuestionForm(request.POST, instance=answer_instance)
        if form.is_valid():
            form.save()
        # 跳转至目标题目页面
        next_q_id = request.POST.get('next_question_id')
        return redirect('question_page', user_id=user_id, question_id=next_q_id)
    
    return redirect('question_page', user_id=user_id, question_id=question_id)

2. AJAX静默保存 #

如果想要无刷新的用户体验，可以用AJAX在切换页面前异步保存当前数据，成功后再跳转页面，避免页面刷新的卡顿感。

JS示例：

document.querySelectorAll('.nav-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.dataset.targetId;
    const formData = new FormData(document.getElementById('question-form'));
    
    fetch('{% url 'ajax_save_question' user.id current_question.id %}', {
      method: 'POST',
      body: formData,
      headers: {
        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
      }
    }).then(response => {
      if (response.ok) {
        window.location.href = `/user/${user.id}/question/${targetId}/`;
      }
    });
  });
});

后端AJAX视图示例：

from django.http import JsonResponse

def ajax_save_question(request, user_id, question_id):
    user = request.user
    question = get_object_or_404(Question, id=question_id)
    answer_instance = get_object_or_404(UserQuestionAnswer, user=user, question=question)
    
    if request.method == 'POST':
        form = QuestionForm(request.POST, instance=answer_instance)
        if form.is_valid():
            form.save()
            return JsonResponse({'status': 'success'})
        return JsonResponse({'status': 'error', 'errors': form.errors}, status=400)
    
    return JsonResponse({'status': 'error'}, status=400)

二、信号、重定向的选择建议 #

• 信号：不推荐使用。信号适合处理模型层面的通用触发逻辑（比如创建用户后自动生成关联数据），但这里是用户主动切换页面的交互行为，用信号会让逻辑变得隐蔽，后续调试和维护成本高。
• 重定向：就是上面提到的PRG模式，是Django处理表单提交后跳转的标准方案，能避免表单重复提交，逻辑清晰，非常适合你的场景。

三、手动触发自动保存脚本 #

完全可以手动触发。只需要把自动保存的逻辑封装成独立函数，既让定时器调用它，也在导航按钮点击时调用这个函数即可：

// 封装通用保存函数
function saveCurrentQuestion() {
  const formData = new FormData(document.getElementById('question-form'));
  return fetch('{% url 'ajax_save_question' user.id current_question.id %}', {
    method: 'POST',
    body: formData,
    headers: {
      'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
    }
  });
}

// 定时器自动保存（每60秒一次）
setInterval(() => {
  saveCurrentQuestion();
}, 60000);

// 导航按钮点击时手动触发保存
document.querySelectorAll('.nav-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.dataset.targetId;
    saveCurrentQuestion().then(response => {
      if (response.ok) {
        window.location.href = `/user/${user.id}/question/${targetId}/`;
      }
    });
  });
});

这样既保留了自动保存的兜底功能，又能在用户切换页面时立刻触发保存，确保数据不会丢失。

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