如何为Django Crispy Forms添加返回上一页的取消按钮

核心思路 #

通过传递来源页URL参数，让取消按钮动态跳转回用户进入表单前的页面，同时做好安全校验避免恶意跳转。

步骤1：传递来源页URL到表单页面 #

在跳转表单的入口链接中，带上当前页面的URL作为next参数：

<!-- 在来源页的模板里，生成表单跳转链接 -->
<a href="{% url '你的表单视图名称' %}?next={{ request.META.HTTP_REFERER|urlencode }}">打开表单</a>

如果是通过表单提交跳转进入表单页，可在跳转的视图中主动获取HTTP_REFERER并传递到表单视图的上下文。

步骤2：视图中接收并校验来源URL #

在表单视图里获取next参数，验证其安全性后传递给模板：

from django.http import HttpRequest, HttpResponseRedirect
from django.shortcuts import render
from django.utils.http import is_safe_url

def form_view(request: HttpRequest):
    # 获取来源页URL，默认跳转首页
    next_url = request.GET.get('next', '/')
    
    # 校验URL安全性，防止恶意跳转
    if not is_safe_url(next_url, allowed_hosts=request.get_host()):
        next_url = '/'

    if request.method == 'POST':
        # 处理表单提交逻辑
        # ...
        # 提交完成后也返回来源页
        return HttpResponseRedirect(next_url)
    
    context = {
        'form': YourForm(),
        'next_url': next_url
    }
    return render(request, 'form_template.html', context)

步骤3：添加动态取消按钮（两种方式） #

方式1：在表单类中通过Crispy Helper添加

修改你的表单类，在初始化时接收next_url并添加取消按钮：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Button

class YourForm(forms.Form):
    # 表单字段定义
    # ...

    def __init__(self, *args, **kwargs):
        self.next_url = kwargs.pop('next_url', '/')
        super().__init__(*args, **kwargs)
        
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        
        # 添加提交按钮
        self.helper.add_input(Submit('submit', '提交'))
        # 添加取消按钮，点击跳转回来源页
        self.helper.add_input(Button('cancel', '取消', onclick=f"window.location.href='{self.next_url}'"))

然后在视图中实例化表单时传递next_url：

form = YourForm(next_url=next_url)

方式2：模板中直接渲染取消按钮（更灵活）

如果不想修改表单类，可在模板里直接添加取消按钮，结合Crispy表单渲染：

{% load crispy_forms_tags %}

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
    
    <button type="submit" class="btn btn-primary">提交</button>
    <a href="{{ next_url }}" class="btn btn-secondary">取消</a>
</form>

注意事项 #

• 处理HTTP_REFERER为空的情况：如果用户直接输入表单URL，没有来源页，需设置默认跳转地址（比如首页）。
• 必须做安全校验：用is_safe_url验证next参数，避免跳转到外部恶意网站。

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