Laravelでajax

作成日:2019-03-28, 更新日:2019-04-03

基本

▼状況にもよるがひとまず、下記。
・ルーティングの設定
・コントローラー
・ajaxの記述

ルーティング（routes/web.php）

・get、postの指定以外は通常のルーティングで大丈夫
※ミドルウェア側でCSRFチェックを行ってくれる

▼get、post送信のどちらを使うかは人それぞれ

Route::get('〇〇〇', '〇〇〇@〇〇〇');
//Route::post('〇〇〇', '〇〇〇@〇〇〇');

コントローラー

・何で返すのか・・・他は通常のコントローラーと変わりなし。

▼最後、何で返すか・・・JSONで返す場合

public function 〇〇〇() {
  $result = [
    〇〇 => 〇〇,
    〇〇 => 〇〇,
  ];
  return \Response::json($result);
}

ajax

・ajaxの「headers」にjsonとcsrfの設定が必要
・他は通常のajax

$.ajax({
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': 〇〇〇, // ←ココにcsrfの値を入れればOK
  },
  〇〇〇
}).done(function(data) {
  〇〇〇
}).fail(function(jqXHR, textStatus, errorThrown) {
  〇〇〇
});

csrfの値の設定・取得

調べていると「metaタグにcsrfをセットして、ajax側で取得」という方法をやるのが普通っぽい。
※inputタグじゃなくmetaタグ。headタグ内に記載する感じだろうね。

▼ビューにmetaタグを記載

<head>
  〇〇〇
  <meta name="csrf-token" content="{{ csrf_token() }}">
  〇〇〇
</head>
<body>
  〇〇〇
</body>

▼ajaxの「headers」のトコ

$.ajax({
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': $('input[name="csrf-token"]').attr('content') // ←コイツがcsrfの値
  },
  〇〇〇
}).done(function(data) {
  〇〇〇
}).fail(function(jqXHR, textStatus, errorThrown) {
  〇〇〇
});

失敗時

基本、ルーティングで弾かれるっぽい。
原因に気付けばラクだけど・・・結構めんどい。

▼ajaxのfail()を下記のように指定

$.ajax({
  〇〇
}).done(function(data) {
  〇〇
}).fail(function(jqXHR, textStatus, errorThrown) {
  var errMes = 'XMLHttpRequest : ' + jqXHR.status + "\n"
             + 'textStatus : '     + textStatus   + "\n"
             + 'errorThrown : '    + errorThrown  + "\n";
  console.log(errMes);
});

※失敗したらコンソールに出力してもらう。

ルーティングでget、postが間違っている場合

▼コンソールに出力

XMLHttpRequest : 405
textStatus : error
errorThrown : Method Not Allowed

▼戻り値

{
    "message": "",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\MethodNotAllowedHttpException",
    以下、略

csrfが無い、間違っている場合

▼コンソールに出力

XMLHttpRequest : 419
textStatus : error
errorThrown : unknown status

▼戻り値

{
    "message": "",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException",
    以下、略