WePuri
ワードプレス教室

WePuri
ワードプレス教室

MENU
[bogo]

ページをリロードしないでPOSTする

「ページを更新しないで、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です