如何使用JavaScript在api post请求后在Laravel中刷新消息？

目标

在post请求成功保存到数据库后刷新消息

问题

当post请求来自react前端时，该消息不会显示。如果react前端收到一条成功消息，它将重新加载页面，如您在

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

if ($report->save()) {
  return response()->json(['success' => true, 'url' => '/admin/reports', 'success'=> 'Feedback gespeichert!'], 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

在

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:）

---

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

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

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

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

---

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

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

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

---

因为这是一个AJAX调用，所以只需在JSON响应中传递它，如果有值，则用JS输出它。因为这是一个AJAX调用，所以只需在JSON响应中传递它，如果有值，则用JS输出它。谢谢。这就是我将要做的：）因此我可以简单地关闭模式，而无需重新加载页面，并用JavaScript显示小消息：）是的，这是wright。您可以选择使用sweet警报库。我正在试着自己编写大部分代码，这样我就能学到很多：）但是谢谢你的提示，它现在可以工作了：）谢谢。这就是我将要做的：）因此我可以简单地关闭模式，而无需重新加载页面，并用JavaScript显示小消息：）是的，这是wright。您可以选择使用sweet警报库。我正试着自己编写大部分代码，这样我就能学到更多：）但是谢谢你的提示，它现在起作用了：）