如何在Django CreateView中显示提交成功的Toast提示消息
我来帮你解决这个Toast提示的问题!你已经用对了SuccessMessageMixin,但问题出在消息的传递和前端获取的方式上,咱们一步步来修正:
SuccessMessageMixin会把success_message存入Django的messages框架,但你的前端脚本有两个关键问题:
- 你把脚本放在了
create.html里,而表单提交后会直接重定向到列表页,这个脚本根本没有执行的机会; - 直接用
{{ 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默认标签有success、warning、error、info,刚好和SweetAlert的icon参数完全匹配。
这样修改后,当你提交表单成功并重定向到列表页时,Toast就会正确弹出你设置的"Bien!!!!"提示了!
内容的提问来源于stack exchange,提问作者Roberto Vargas




