codes on tilt shift lens

記録

デモ55ajax=jqueryを使わずに非同期通信するのが普通に。

おはようございます。

祝日が始まりましたね、お休みの方も多いかと思います。

そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。

非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="api">非同期通信</button>
    <script>
        document.getElementById("api").addEventListener("click", api);

        function api() {
            let data = [];
            data.push({"name":"樹龍"});
            console.log(param(data));
            fetch("./api.php", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body:param(data)
            }).then(
                response => response.json()
            ).then(data => {
                console.log('data', data);
            }).catch(error => {
                console.log('error', error);
            });
        }
        function param(data){
            let str = [];
            for(key in data){
                for(keyname in data[key]){
                    str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
                }
            }
            return str.join("&");
        }
    </script>
</body>

</html>
<?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);







    glowing lamps on ceiling in darkness光の速さでUSBを繋ぐ、いずれ全て通信処理は光の速さで行うことになるのか?前のページ

    期待しているけど。どうなるかな○×○×庁の今後は🤔次のページbokeh photography of person holding turned on iphone

    関連記事

    1. 記録

      ついにキタ━━━━(゚∀゚)━━━━!!

      ついにぐーぐるほーむみにがやって来ました。早速、Twitterと連…

    2. 記録

      この頃、タイトル名を変更しているわけ。

      タイトル名を変更しているわけ。SEO的にはあまりよろしくはないタイ…

    3. 記録

      jQueryでローディングって検索すると。

      jQueryでローディングって検索すると何やらいろいろ…

    4. 記録

      Adobeの値段の付け方がせこい。

      自分はAdobeのフォトプランというものを使っているのですがイラス…

    5. 記録

      この頃、超暑かったですが。

      この頃、猛暑が続きましたが暑いぐらいに来週あたりから徐々に温度…

    2022年5月
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031  

    カテゴリー

    アーカイブ

    PAGE TOP