如何在使用JavaScript的API发布请求后如何在Laravel中刷新消息？

Question

目标

在将发布请求成功保存到数据库后刷新消息。

问题

当发帖请求来自React前端时，该消息不会出现。如果反应前端收到成功消息，则会重新加载页面，如handleSubmit功能中所见。当从以“标准laravel方式”生成的表单发送请求时，一切都很正常，如预期的那样。

所以这是代码：

ReportsController：

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功能中发送发布请求：

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);
}

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

Answer 1

您正在使用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.");
    }