Как набрать sh сообщение в Laravel после запроса сообщения API с JavaScript? - PullRequest
Новая
       14

Как набрать sh сообщение в Laravel после запроса сообщения API с JavaScript?

0 голосов
/ 28 апреля 2020

Цель

Fla sh сообщение после успешного сохранения почтового запроса в базе данных.

Проблема

Сообщение не появляется, когда почтовый запрос поступает от реагирующего веб-интерфейса. Если пользовательский интерфейс реагирует на сообщение об успехе, он перезагружает страницу, как вы можете видеть в функции 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;
}

Так в чем же ошибка?

Спасибо за ваше время в advance:)

Редактировать

Я решил это без перезагрузки страницы и позволил 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);
}

В зависимости от ответа я добавляю соответствующее предупреждение.

1 Ответ

0 голосов
/ 28 апреля 2020

Вы используете функцию javascript asyn c, и ваша страница не перезагружается после отправки данных поста. Таким образом, вы можете поместить свое сообщение в 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.");
    }
...