Django提交Form表单后携带POST数据跳转及外键获取问题

1. 解决外键值无法获取的问题 #

如果你的外键值不需要用户手动填写（比如关联当前登录用户），可以在视图保存表单时手动赋值，不需要前端传递：

# 修改addEventView的post方法
def post(self, request, *args, **kwargs):
    form = addEventForm(request.POST)
    if form.is_valid():
        # 先不提交到数据库，拿到实例对象
        event_instance = form.save(commit=False)
        # 手动赋值外键，比如关联当前登录用户
        # event_instance.user = request.user
        # 赋值完成后再保存到数据库
        event_instance.save()
        # 返回成功状态+新创建的事件ID
        data = {
            "success": "successfully added",
            "event_id": event_instance.id
        }
    else:
        data = {"error": form.errors}
    return JsonResponse(data, safe=False)

如果外键需要用户选择，直接在前端模板中渲染表单字段即可，addEventForm默认会把外键字段渲染为下拉选择框，模板中添加{{ form.as_p }}就能展示所有字段。

2. 新增事件详情展示视图 #

先写一个用于展示提交后数据的详情视图，通过URL参数传递的事件ID查询对应数据：

# 新增详情视图
class EventDetailView(LoginRequiredMixin, View):
    template_name = 'pages/event_detail.html'

    def get(self, request, event_id, *args, **kwargs):
        # 查询对应事件，可自行添加权限校验逻辑
        event = Event.objects.get(id=event_id)
        return render(request, self.template_name, {"event": event})

对应添加路由配置：

# urls.py中添加
path('event/<int:event_id>/', EventDetailView.as_view(), name='event_detail')

3. 修改前端跳转逻辑 #

不要直接刷新页面，解析接口返回的事件ID，拼接详情页URL跳转：

const xhr = new XMLHttpRequest();
xhr.open("POST", "/pages/add_event");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(formdata);
xhr.onload = () => {
    const res = JSON.parse(xhr.responseText);
    if (res.success) {
        // 跳转到详情页，携带事件ID参数
        window.location.href = `/pages/event/${res.event_id}/`;
    } else {
        // 错误处理逻辑，比如展示错误提示
        console.error("提交失败：", res.error)
    }
};

之后你就可以在event_detail.html模板中，通过{{ event.字段名 }}渲染所有提交的数据了。

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