51歳からのプログラミング 備忘 jquery-ajaxでコメント登録 return false preventDefault() stopPropagation()

非同期でデータを登録したくて！

参考にさせていただきました

http://js.studio-kingdom.com/jquery/ajax/ajax
http://www.koikikukan.com/archives/2012/10/02-005555.php
https://qiita.com/otsukayuhi/items/31ee9a761ce3b978c87a

ありがとうございました。

ajax、、、結構、なかなか悩んだよ。
複雑なのは頭痛くなるので、簡単なのを備忘記録。
いつか使いこなそうっと。

構成

• web.php
• ajax.blade.php
• CommentContoroller.php

順にコードを。

web.php

Route::get ('/ajax', function(){return view('ajax');});
Route::post('/ajax','CommentController@post_ajax');

ajax.blade.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('form').submit(function(){
    $.ajax({
             type : 'post',
             url  : 'ajax',
             data :{'comment':'コメント',_token:'{{csrf_token()}}'},
    })
    .done(function(){  alert('success');  })
    .fail(function(){  alert('fail')   ;  });
  });
});
</script>

<form>
  <input type='text' name='comment'/>
  <button>send</button>
</form>

csrf対策をしないと、419エラーになってしまうのです。
headerで処理する方法もあるようです。

CommentController.php

namespace App\Http\Controllers;

use App\Comment;
use Illuminate\Http\Request;
use Illuminate\Http\Response;

class CommentController extends Controller{
      public function post_ajax(Request $request){
             $item    = $request->all();
             unset($item['_token']);
             $comment = new Comment;
             $comment->fill($item)->save();
             return response()->json('連想配列'=>'値');//連想配列を作りjson化

     }
}

お世話になってます、下記サイト様

https://laraweb.net/surrounding/4476/

json()は、必要なheader情報を追加し、json_encodeもしてくれるメソッドなのですな！

上記のコードを変更

$.ajaxで送信、controllerで受信し、json化して、送信元に返信。
送信元でアラート表示してみる。

ajax.blade.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(function(){
  $('form').submit(function(e){
     e.preventDefault();
     var comment = $('input[name="comment"]').val();

     $.ajax({
                 type : 'post',
                 url  : 'ajax',
                 data :{'comment':comment,_token:'{{csrf_token()}}'},
     }).then(
        function(item){ alert('success') },
        function(item){ alert('fail'   ) }
     );
});

</script>

<form>
  <input type='text' name='comment'/>
  <button>send</button>
</form>

controller

class CommentController extends Controller{
      public function post_ajax(Request $request){
             $comment['comment'] = $request->comment;
             return response()->json($comment);
     }
}

return false; preventDefault() stopPropagation()

jqueryの場合

方法	要素イベント	親要素への伝播
return false	×	×
preventDefault()	×	〇
stopPropagation()	〇	×

javascriptの場合

方法	要素イベント	親要素への伝播
return false	×	〇
preventDefault()	×	〇
stopPropagation()	〇	×

The GET method is not supported for this route. Supported methods: POST.

\$.ajaxを使っていると、エラーが出た時に、原因を見つけ辛い。

ディベロッパーツールのNetworkで、$.ajaxで指定されたurl宛の通信内容を確認すると、「The GET method is not supported for this route. Supported methods: POST.」っていうエラーを見ることがある。

素直に、urlやroute、controllerなどのroute関係を確認しても、エラーの原因は見当たらなかったりする。（このエラーは、controllerから$.ajax呼び出し元への返信に際してのエラーなのかな？）

で、エラーの内容はcontroller内の、どこかのタイプミスだったり文法ミスだったりするので注意が必要ですね。

$.ajaxのエラーキャッチの方法は、ググると色々あるので、目的にあった方法を確認しとかないとね。