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

順にコードを。

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

```php: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で処理する方法もあるようです。

```php: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化して、送信元に返信。
送信元でアラート表示してみる。



```php: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>
```

```php: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のエラーキャッチの方法は、ググると色々あるので、目的にあった方法を確認しとかないとね。