おはようございます、華の金曜日ですね～🙄。けんすうさんは一体何歳なんだろか？自分より若いのかな？それとも・・・・。
さて、今日は久しぶりにlaravelの非同期処理でDELETE・PATCH・PUTをする方法を記載しておきます。大体の人が知っているもしくは非同期処理でRESTの設計を使わないよという方もいるかもしれない。ですが、あまり遷移させたくない、遷移させると余計にコードを書かないといけない等、そういう場面があると思います。是非、そういう時は非同期処理でDELETE・PATCH・PUTして上げてください。
因みにこの頃、知ったのですがBootstrapからtailwindへ鞍替えする人が続出してダウンロード数が逆転した話を知りました。web業界に限らずですが隅から隅まで覚えている人は凄いなと関心します。自分は、どうしてもググったりドキュメントでググったりします。
document.getElementById('btn').addEventListener('click', () => {
const formData = new FormData();
formData.append('id', document.getElementById('id_number').value);
formData.append('_method','PUT');//DELETE・PATCH・PUT
fetch('ajax-test', {
method: 'POST',
headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
body: formData
})
.then(response => response.json())
.then(res => {
console.log('res: '+res[0].id);
document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
})
.catch(error => {
console.log(error); // エラー表示
});
});
