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. 記録

    漫画家もYOUTUBERしている。

    漫画家もYOUTUBERしている。下記の動画を観てプロフェッシ…

  2. 記録

    C#SFTPでダウンロードするプログラムの作り方。

    C#SFTPでダウンロードするプログラムの作り方。いろいろ調べた結…

  3. 記録

    映画、「何者」を観てきましので #映画レビュー

    映画、「何者」を観てきましので映画の感想を残しときます。映画、「何…

  4. 記録

    SEOって意味があるのかわからないけれどAll in One SEOの採点は気にしてる。

    SEOって意味があるのかわからないけれどAll in One SEO…

  5. 記録

    執筆:ただ書いてるだけ。

    執筆:自分はただ書いてるだけであってブロガーとして生計を立てるわけ…

  6. 記録

    島フェスの告知依頼が来ました。

    島フェスの告知依頼がきましたので告知をtosajin.infoのTw…

2022年5月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

カテゴリー

PAGE TOP