おはようございます。
祝日が始まりましたね、お休みの方も多いかと思います。
そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。
非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。
<!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);
