时间戳

首页 > 解决方案 > 使用 JavaScript 进行 api 发布请求后如何在 Laravel 中闪烁消息？

javascript - 使用 JavaScript 进行 api 发布请求后如何在 Laravel 中闪烁消息？

问题描述

目标

发布请求成功保存到数据库后闪烁一条消息。

问题

当发布请求来自反应前端时，该消息不会出现。如果反应前端收到成功消息，它会重新加载页面，正如您在handleSubmit函数中看到的那样。当从以“标准 laravel 方式”生成的表单发送请求时，一切正常，如预期的那样。

所以这里是代码：

报告控制器：

use Illuminate\Support\Facades\Session;

...

public function store(Request $request)
  {
    $report = new Report([

      'name' => $request->get('name'),

      'body' => $request->get('body'),

      'visible' => $request->get('visible'),

      'show_in_slider' => $request->get('show_in_slider')

    ]);

    if ($report->save()) {
      Session::flash('success', 'Feedback gespeichert!');
      return response()->json(['success' => true, 'url' => '/admin/reports'], 200);
    }
  }

中的线api.php

Route::resource("reports", "ReportsController");

消息的刀片：

@if(count($errors) > 0)
@foreach($errors->all() as $error)
<div class="warning-modal">
  {{$error}}
</div>
@endforeach
@endif

@if(session("success"))
<div class="alert-modal">
  {{session("success")}}
</div>
@endif

@if(session("error"))
<div class="warning-modal">
  {{session("error")}}
</div>
@endif

React 前端中的相应函数片段。

handleSubmit：

async function handleSubmit(event) {
        event.preventDefault();
        const response = await saveData("/api/reports", report);
        if (response.success) {
            window.location = response.url;
        } else {
            alert("Ein Fehler ist aufgetreten.");
        }
    }

在saveData函数中发送 post 请求：

export default async function saveData(api, data) {
    const token = document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content");
    const url = window.location.origin + api;
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": token
        },
        body: JSON.stringify(data)
    });

    const result = await response.json();
    return result;
}

那么错在哪里呢？

提前感谢您的时间:)

编辑

我在没有重新加载页面的情况下解决了它，并让 JavaScript 处理警报。感谢 elyas :)

export default async function PostData() {
    const report = await CollectData();

    const response = await SaveData("/api/reports", report);

    const alert = document.createElement("div");
    alert.innerHTML = response.message;
    if (response.success) {
        alert.className = "alert-modal";
        ToggleNewReport();
    } else {
        alert.className = "warning-modal";
    }

    document.getElementById("content").appendChild(alert);
}

根据响应，我添加相应的警报。

标签： javascriptlaravelpostrequest

解决方案

您正在使用 javascript 异步功能，并且您的页面在发送帖子数据后不会重新加载。因此，您可以将消息放入 json 数据中并通过 javascript 显示。在您的控制器中：

if ($report->save()) {
  return response()->json(['success' => true, 'url' => '/admin/reports', 'success'=> 'Feedback gespeichert!'], 200);
}

在 JS 文件中：

if (response.success) {
        alert(response.message);
        window.location = response.url;
    } else {
        alert("Ein Fehler ist aufgetreten.");
    }

推荐阅读