「ページを更新しないで、1部のデータのみデータベースなどに自動保存されるようにしたい」という要望は、例えば「いいねボタン」や「リアルタイムチャット」などのシステムを作り時など、多くの場面で利用されます。
今回はJavaScriptとPHPを使って、そういったシステムを作る技術の初歩「ページをリロードしないでフォームデータを別ページにPOSTする方法」をご紹介させていただきます。
ポイントとなる技術
//ページを更新しないでサーバーにデータのリクエストをするJavaScriptの関数
XMLHttpRequest()
サンプルコード
【ファイル構造】
index.php
post.php
message.txt
<!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>ページをリロードしないでPOSTする</title>
</head>
<body>
<!-- 入力フォーム -->
<form method="post" id="chat">
<textarea name="message"></textarea>
<input type="button" value="送信" onclick="asyncPost('chat', 'post.php');">
</form>
<!-- JS -->
<script>
/* *
* ページをリロードしないで、POSTする
* */
function asyncPost(formID, url) {
const formElement = document.getElementById(formID);
let formData = new FormData(formElement);
oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function () {
//処理完了後に行われる内容をここに記載
console.log('送信完了しました!')
}
oReq.send(formData);
}
</script>
</body>
</html>
<?php
// データの受け取り
$a = $_POST['message'];
// データの書き込み
file_put_contents("message.txt", $a);
このファイルは空でOKです