You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Django CreateView中显示提交成功的Toast提示消息

我来帮你解决这个Toast提示的问题!你已经用对了SuccessMessageMixin,但问题出在消息的传递和前端获取的方式上,咱们一步步来修正:

问题根源

SuccessMessageMixin会把success_message存入Django的messages框架,但你的前端脚本有两个关键问题:

  1. 你把脚本放在了create.html里,而表单提交后会直接重定向到列表页,这个脚本根本没有执行的机会;
  2. 直接用{{ messages.0 }}获取消息的方式不可靠,而且没有处理消息里的特殊字符,容易引发JS语法错误。
解决步骤

1. 确认Django消息配置(确保消息能传递到模板)

先检查settings.py里的模板上下文处理器,确保django.contrib.messages.context_processors.messages已经启用——它是Django传递消息到模板的核心:

TEMPLATES = [
    {
        # ... 其他模板配置
        'OPTIONS': {
            'context_processors': [
                # ... 其他上下文处理器
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

这个配置默认是启用的,但如果被误删了,messages就无法传到模板中。

2. 把Toast脚本移到目标页面(列表页模板)

因为表单提交后会重定向到almacenes列表页,所以要把Toast脚本放在列表页的模板里(或者放在所有页面都继承的base模板里,实现全局消息提示)。

修改脚本,正确遍历Django的messages:

<script>
$(function () {
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
    });

    // 遍历所有系统消息,触发Toast提示
    {% for message in messages %}
        Toast.fire({
            icon: 'success',
            title: "{{ message|escapejs }}"
        });
    {% endfor %}
});
</script>

这里的|escapejs过滤器非常重要——它会把消息里的引号、换行等特殊字符转义成JS能识别的格式,避免出现语法错误。

3. 确认视图继承顺序(你的代码已经做对了)

你已经把SuccessMessageMixin放在CreateView前面,这个顺序是正确的:Mixin必须放在被继承的类前面,这样它的逻辑才能正确覆盖CreateView的表单处理流程。你的代码没问题:

class AlmacenesCreateView(SuccessMessageMixin, CreateView):
    # ... 你的视图配置
额外优化提示

如果想区分不同类型的消息(比如成功、警告、错误),可以利用Django消息的tags属性动态设置Toast的图标:

{% for message in messages %}
    Toast.fire({
        icon: "{{ message.tags }}",
        title: "{{ message|escapejs }}"
    });
{% endfor %}

Django的messages默认标签有successwarningerrorinfo,刚好和SweetAlert的icon参数完全匹配。

这样修改后,当你提交表单成功并重定向到列表页时,Toast就会正确弹出你设置的"Bien!!!!"提示了!

内容的提问来源于stack exchange,提问作者Roberto Vargas

火山引擎 最新活动