2023年4月にjQueryでJavaScriptを使ってAjax（非同期）の実装を試みる。機能は検索機能。
・開発環境
PHP 8.1.17
Laravel：ver6台(課題の指定がバージョン６)
Composer version 2.5.5
macOS ver13.31
まずは、
【参照】：【jQuery入門】jQueryの基本的な書き方・文法
https://uxmilk.jp/11074
を参照して
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
を入れる。
これを参照：https://enginiya.com/entry/laravel-how-to-use-ajaxすると以下のようにしてAjaxをかける。
＊正直、上記のブログを参照すると非同期処理を実装できる。書いた俺以外の人はそっちを参考にしてください。
// 検索ボタンを押したら、検索欄とメーカー一覧の欄の情報
$(function() {
$(".goods_select_btn").on("click", function() {
$('.goods-list tbody').empty(); //もともとある要素を空にする
$('.search-null').remove(); //検索結果が0のときのテキストを消す
var searchSale = $('.search').val(); //検索ワードを取得
var selectSale = $('.select').val(); //選択メーカーの情報を取得
$.ajax({
type: 'POST',
url: "{{ route('select') }}",
data: 'search': searchSale,},
dataType: 'json', //json形式で受け取る
}).done(function($search) { //ajaxが成功したときの処理
$('.sale-list tr').append('<td>$search.value</td>');//sale-listというクラスのテーブルにappend();でtrを追加する。
}).fail(function() {
//ajax通信がエラーのときの処理
console.log('どんまい！');
})
})
});
コントローラーやルーティングは置いておいて、このbladeを出力しようとするとエラーコード
POST http://localhost:8888/＊＊＊/public/＊＊＊ 419 (unknown status)
のようなものが出た。
これをChatGptで検索にかけると
「このエラーは、CSRFトークンが期限切れまたは不一致のために、リクエストが拒否されたことを示しています。
Laravelでは、CSRF攻撃を防止するために、デフォルトで全てのPOSTリクエストに対してCSRFトークンを要求します。このトークンがない場合、リクエストは拒否されます。」
と出る。
つまり、トークン処理を入れろということだ。
今まで、フォームリクエストの時に@csrfを入れたように、jQueryでも入れるということ。
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $("[name='csrf-token']").attr("content") }, })
</body>
を入れると解決する。
今後Laravelで非同期処理を実装する際にはこれを見直そうと思う。
ちなみにこのbladeだと、
＄searchでjsonデータを持ってきているはずだが、出力部分である
<td>$search.value</td>は間違っているため
検索結果は、
［$search.value］としか表示されない笑
正直、カリキュラムの課題を早く終わらせたいから笑えない。