是否可通过前端JavaScript实现Django toast消息推送

Django contrib messages 本质是服务端消息机制，纯前端JS没法直接调用它的接口写入消息。
它的原生工作流是：视图层把消息内容写入当前请求关联的session/Cookie，模板渲染时遍历消息队列生成对应的HTML节点，页面加载后前端组件给这些节点加上弹出、自动消失的动效。你如果不想走后端视图逻辑，完全没必要硬套服务端的messages流程，直接用JS动态生成和现有messages toast样式、行为完全一致的节点就行，用户侧看不出任何区别。

具体实现 #

• 先对齐你项目现有toast的DOM结构
  打开页面F12找到Django messages正常渲染出来的toast提示，复制它的类名、层级结构就行。大部分集成了Bootstrap的Django项目，全局base模板里的messages渲染代码大概是这样：

<!-- 全局base.html里的messages渲染段，所有页面都会加载 -->
{% if messages %}
<div class="toast-container position-fixed top-0 end-0 p-3">
  {% for message in messages %}
  <div class="toast align-items-center text-bg-{{ message.tags }} border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">{{ message|safe }}</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

• 改写原来的JS函数，替换掉alert()
  直接用JS动态拼接相同结构的toast节点，调用对应UI组件的初始化方法就行，以Bootstrap Toast为例：

function TestBtn(id) {
  // 优先找页面已有的全局toast容器，不存在就动态创建
  let toastContainer = document.querySelector('.toast-container');
  if (!toastContainer) {
    toastContainer = document.createElement('div');
    toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
    document.body.appendChild(toastContainer);
  }

  // 生成和Django messages输出完全一致的toast节点
  const toastEl = document.createElement('div');
  toastEl.className = 'toast align-items-center text-bg-success border-0';
  toastEl.setAttribute('role', 'alert');
  toastEl.innerHTML = `
    <div class="d-flex">
      <div class="toast-body">test successful</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  `;
  toastContainer.appendChild(toastEl);

  // 初始化toast，3秒自动消失，隐藏后删除冗余节点
  const toastInstance = new bootstrap.Toast(toastEl, { autohide: true, delay: 3000 });
  toastInstance.show();
  toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
}

• 原来的HTML触发逻辑不需要修改，直接保留即可：

<a onclick="TestBtn('btn');return false;" href="#"></a>

如果你一定要严格复用Django contrib messages的存储逻辑，就必须发异步请求到后端，由视图层调用messages.success()写入消息后返回响应，这种方案必须经过视图层，不符合你的需求，纯前端交互场景完全没必要用。

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