華 | zip358.com

laravelの非同期処理でDELETE・PATCH・PUT😗する方法。 #php #code

2023.01.27

おはようございます、華の金曜日ですね～🙄。けんすうさんは一体何歳なんだろか？自分より若いのかな？それとも・・・・。

https://www.youtube.com/watch?v=3vHiqXHH5oc

【後藤達也は椅子にハマれ】けんすうが説くお金の使い方【と、起業家ひろゆきの素顔】

さて、今日は久しぶりに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); // エラー表示
        });
});

タグ

addEventListener, ajax-test, catch, document.getElementById, document.querySelector, fetch, formData, formData.append, getElementById, headers, innerHTML, Laravel, METHOD, quot, res, response, response.json, tailwind, then, 華,