laravelでPOSTした際、画面遷移したい

Question

前提

laravelでjsを使用してpostでフォームデータを遷移先に渡したいのですが、画面遷移しません。
デベロッパーツール上では、/confirmのstatusは200になってるけど画面はpostを実行した画面のままです。

実現したいこと

postを使用して遷移先にデータを渡し、その遷移先の画面を表示したい。

発生している問題・エラーメッセージ

特にエラーは出ていない

エラーメッセージ

該当のソースコード

     /**
     * 確認画面表示
     * @param Request $request
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function confirm(Request $request)
    {
        return view('member.confirm',compact('request'));
    }

Route::post('/confirm', [App\Http\Controllers\ConfirmController::class, 'confirm'])->middleware('auth');

<div class="edit_contents">
   <div class="thumbnail-content">
      <label class="label" style="display: block;">{{ config('message.thumbnail') }}</label>
      <label>
      <div class="thumbnail">
      <div class="delete_spot_photo delete_photo"><span>×</span></div>
      <img class="thumbnail-img">
      <span class="photo">写真追加</span>
      </div>
      <input type="file" name="thumbnail" id="thumbnail" hidden accept=".png, .jpeg, .jpg">
      </label>
   </div>
   <div class="title-contents">
      <label for="title" class="label">{{ config('message.title') }}</label>
      <input type="text" name="title" id="title" maxlength="100" placeholder="{{ config('message.title_exam') }}">
      <span class="error_title error"></span>
   </div>
   <div class="description-contents">
   <label for="description" class="label">{{ config('message.description') }}</label>
   <textarea name="description" id="description" cols="30" rows="10" maxlength="200" placeholder="{{ config('message.description_exam') }}"></textarea>
   <span class="error_description error"></span>
   </div>
</div>

  // 確認画面遷移
  $('#spot_confirm').click(function(){
    // バリデーションチェック
    let formData = check(); // inputの値のチェック後にフォームデータに格納
    var request = new XMLHttpRequest();
    request.open("POST", "/confirm");
    request.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
    request.send(formData);
  });

試したこと

postをgetに変えたが、画面遷移は行われない(statusは200のまま)
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

XMLHttpRequestは非同期通信によるリクエストです。
HTML提示されてないので構造不明ですが、通常のform送信にしたら良いのではないでしょうか。

Comments

[jem32o_]

edit.blade.phpがhtml部分になります。(bodyのみ)
post前にjsでチェック処理してからpostしたいからcheck()にてnew FormData()にチェック後の値をappendしています。
request.open("POST", "/confirm", false);のようにfalseつけると同期処理でリクエストできると調べたらあったので試しましたが、画面遷移できませんでした。何故なのでしょうか？

[m.ts10806]

今回の「同期」「非同期」はあくまで指定URLに対してバックグラウンドでのリクエストを送る際に待機するかしないか（非同期だと待機しない）なので、画面遷移は起きません。
「リクエストを画面に対して送信」したいならformでのリクエストが最も手っ取り早いです。

[jem32o_]

>「リクエストを画面に対して送信」したいならformでのリクエストが最も手っ取り早いです。
参考までに聞きたいのですが、jsで「リクエストを画面に対して送信」する方法はあるのでしょうか？

[m.ts10806]

GETならクエリストリング込みのURLを生成。
POSTならformを一時的に作るとか、formをsubmitボタンをjsでクリックさせるとか。
ファイル送信したいなら属性はきちんとつけないといけませんが。

JavaScriptでのチェックをはさみたいだけならsubmitをpreventDefaultで止めて、
チェック結果によってsubmitをJavaScriptで行うとか。
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit

[jem32o_]

>POSTならformを一時的に作るとか
上記どういう意味で言っておりますでしょうか？「document.createElement('form')」をjsで一時的に生成する話でしょうか？

[m.ts10806]

はい。生成したうえでHTML上に置きます。
リクエスト先をそのまま画面遷移先とする場合はそのようにすることになります。

[jem32o_]

参考になりました。
ありがとうございます。