javascript で POST する(2)
昨日の説明では少しわかりにくいかなと思ったので、具体的なページを作って見ました。1ページだけで異なったページを返すことができます。
これは、何のためにわざわざ考えたのかと言うと、アダルトゲーム関連のページを作るにあたって、年齢確認をしたかったからです。直リンクされてもきちんと年齢確認ができるようにしたかったためです。それなら、確認のページを作れば良いかと思いましたが、結局、リンクに書くか、POST で送らなければならなくなります。リンクに書いたら意味はないし、それぞれのページに form を作るのも面倒だったからです。
実際にわかりやすいように 3 ファイルに分けました。
- page.php
この PHP で POST データとセッションデータをチェックし、ページの内容を切り替えます。 - post.html
自分のページへ POST データを送る htmlです。page.php にinclude されます。 - clear.php
テスト用のセッションデータを削除するPHPです。
それぞれの内容は次のようになります。
page.php
<?php
session_start();
if( isset($_POST['age']) && $_POST['age'] == '18' ) {
$_SESSION['age'] = 'ok';
} else {
if( ! isset($_SESSION['age']) || $_SESSION['age'] != 'ok' ) {
// javascript で POST データを送るページをインクルードします。
include "post.html";
exit;
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>POST データ確認</title>
</head>
<body>
<p>あなたは成年ですね。</p>
POST データをセッション変数に格納して、その変数が有効な間、このページが表示されます。<br>
<a href="clear.php">セッションデータを削除する。</a>
</body>
</html>post.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ページ</title>
<script>
function post() {
xhr = new XMLHttpRequest();
xhr.open('POST', '#', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
var request = "age=18";
xhr.send(request);
location.reload();
}
</script>
</head>
<body>
<h1>年齢確認</h1>
<p>
<div>あなたは 18 歳以上ですか？</div>
<a href="#" onclick="post(); return false;">はい</a>
<a href="#" onclick="history.back(); return false;">いいえ</a>
</p>
<p>
<div>フォームで POST する（普通のやり方）。</div>
<form method="POST" action="#">
<input type="hidden" name="age" value="18">
<input type="submit" name="yes" value="はい">
<input type="button" name="no" value="いいえ" onClick="history.back();">
</form>
</body>
</html>clear.php
<?php
session_start();
unset($_SESSION['age']);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セションデータの削除</title>
</head>
<body>
セッション変数を削除しました。<br>
<a href="#" onclick="history.back(); return false;">戻る</a>
</body>
</html>ブラウザで テストページ を開いてください。この時、アドレスバーのページのアドレスを確認してください。「https://sirius10.net/SampleCode/POST/page.php」となっていると思います。次のように表示されると思います。
リンクか、フォームのボタンの「はい」をクリックするとページの内容が次のように変わります。
このときのアドレスも確認してください。前と変わらないと思います。セッションデータを削除するリンクをクリックして戻ってくれば、また、ページのイメージ１の内容になっていると思います。
フォームの POST と同じではありませんが、POST することができました。page.php の php プログラムの部分を年齢確認したい全てのページの先頭に追加すれば、セッションデータがない場合は確認のページが表示され、セッションデータがあれば、ページの内容が表示されます。
2021.07.25 追記
記事内の JavaScript は、FireFox では動かないようです。JavaScript 部分は次の記事の JavaScript を使ってください。