使用javascript在laravel中显示有时仅会话闪存消息(1)

📌 相关文章

📜 使用javascript在laravel中显示有时仅会话闪存消息(1)

📅 最后修改于: 2023-12-03 15:22:18.766000 🧑 作者: Mango

使用JavaScript在Laravel中显示有时仅会话闪存消息

在Laravel中，使用会话闪存可以轻松将消息从一个请求传递到另一个请求。这对于在表单提交后显示成功或错误消息非常有用。但是，有时候我们只想在当前请求中显示闪存消息，而不是在下一个请求中显示。对于这种情况，我们可以使用JavaScript来实现。

实现步骤

在Laravel中设置闪存消息

我们可以使用Laravel的with方法将闪存消息放入会话中。例如，以下代码将success消息闪存到会话中：

return redirect()->route('home')->with('success', '操作成功！');

创建JavaScript脚本

我们需要创建一个showFlashMessage函数来在当前请求中显示闪存消息。该函数应该在请求的HTML文档中的JavaScript部分中定义。

function showFlashMessage() {
  const flashMessage = document.getElementById('flash-message');
  if (flashMessage) {
    const message = flashMessage.dataset.message;
    const type = flashMessage.dataset.type;
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const messageHtml = `<div class="alert ${alertClass}">${message}</div>`;
    flashMessage.insertAdjacentHTML('afterend', messageHtml);
    flashMessage.remove();
  }
}

该函数首先查找具有id为flash-message的HTML元素。如果没有找到这样的元素，则函数将不执行任何操作。否则，函数将从该元素的data-message和data-type属性中获取消息的文本和类型。然后，根据消息的类型，函数将创建一个相应的警报类名。接下来，函数将在flash-message元素的后面插入一个新的HTML元素，其中包含警报类名和消息文本。最后，函数将删除原始的flash-message元素。

在请求的HTML文档中调用JavaScript脚本

为了让showFlashMessage函数起作用，我们需要将它作为JavaScript脚本添加到请求的HTML文档。例如，在Laravel中，我们可以通过将以下内容添加到app.blade.php（或其他适当的布局文件）来实现此目的：

<body onload="showFlashMessage()">
  @if (session()->has('success') || session()->has('error'))
    <div id="flash-message" data-message="{{ session()->get('success', session()->get('error')) }}" data-type="{{ session()->has('success') ? 'success' : 'error' }}"></div>
  @endif
  <!-- 页面内容 -->
</body>

该脚本将在文档加载完成时自动调用，并显示闪存消息（如果有）。flash-message元素的文本内容和类别将从会话中获取。

总结

通过使用JavaScript来实现只在当前请求中显示闪存消息，我们可以避免将这些消息显示在后续请求中。上述步骤简洁易懂，代码可读性高，可以为开发者提供一种简便的在Laravel中如何使用JavaScript实现闪存消息的方法。