記録

htmlとcssとphp-初学非同期処理とおまけ-No.3

おはようございます。月曜日の朝ですね‥お仕事探しは続いています。

さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

ぐぐると自分言っていた意味がなんとなく分かるかと思います。ちなみに非同期動画(youtube)のおまけとして、背景画像を変える処理のソースコードを書いています。プログラムコードとしては3行ですが、初学者の方はこの3行のソースコードの方が面白いのかもしれません。自分が書いたソースコードを所々、変更して動かしてみてください。そうすることで、徐々にコードの意味が理解してくると思います。

追伸:サンプルサイトの動画は少しお休みします()?

https://358tool.com/sample-site/



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

映画、イントゥ・ザ・スカイ~気球でみらいを変えたふたり #アマプラ前のページ

ザ・プレイリストを観ました。 #シーズン1 #ネトフリ#Spotify次のページ

関連記事

  1. 記録

    20代はコミ障ではなかったのだけどね。

    おはようございます。昨日、退職を致しました…よ。本当は自分のタイミン…

  2. fashion dark connection technology

    記録

    物体認識ではラズパイが必ず必要でもないとふと思った。

    おはようございます。記事の投稿の時間帯から変えようか悩んでいます。…

  3. 記録

    香南市のあじさい街道へ行ってきた。

    香南市のあじさい街道へ行ってきました。滞在時間3分(´Д`)ぐらいで…

  4. 記録

    去年出来なかったダイエット、どこまで減量、増量したのか?

    おはよう御座います。昨日、お餅を2つ食べただけで体重が1kg増えてお…

  5. 記録

    何かを辞める時。決断力。

    何かを辞める時。辞めてよかったと思うことが多い気がする。会社などを辞…

  6. 記録

    本:お金の教養を読んでみた。

    https://twitter.com/zip358com/statu…

2022年11月
 123456
78910111213
14151617181920
21222324252627
282930  

カテゴリー

PAGE TOP