フォームとajax（fetch？）での動作の違い

Question

実現したいこと

index.phpからajaxでindex.phpに向けてPOSTデータを送り、
送ったPOSTデータをindex.phpに表示させたいです。

発生している問題・分からないこと

index.phpのフォームでindex.phpに向けてPOSTデータを送って、
$_POST["キー"]で表示することはできるのに、
index.phpからajaxでindex.phpに向けてPOSTデータを送ると
$_POST["キー"]で表示することがなぜできないのかがわかりません。

該当のソースコード

<?php

中略

//パラメータを取得
$postdata   = $_POST["key1"]; //ここでデータを受け取れない

print($_POST["key1"]); //←これが表示されない

$html .= "
<!-- クライアント側 -->
<script>
// XMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();

// POSTメソッドとAPIのエンドポイントを指定してリクエストを初期化
xhr.open('POST', 'index.php', true);

// リクエストヘッダーを設定
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// リクエストの状態が変わったときのイベントハンドラを設定
xhr.onreadystatechange = function() {
    // リクエストが完了し、レスポンスが成功だった場合
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log('status 200');  // レスポンスをコンソールに出力
    }
};

var data = 'key1=value1&key2=value2';
xhr.send(data);
</script>";

print $html;
?>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

index.phpのフォームでindex.phpに向けてPOSTデータを送って、
$_POST["キー"]で表示することはできるのに、
index.phpからajaxでindex.phpに向けてPOSTデータを送ると
$_POST["キー"]で表示することができない。

補足

特になし

Comments

[maisumakun]

ブラウザの検証ツールで送信状況を確認してみたりはしましたか？

[torimingo]

ありがとうございます。
検証ツールで確認したところ、フォーム送信の場合は、index.phpを再表示するのですが、
ajaxの場合は、index.phpを再表示しませんでした。
フォームでもajaxでもindex.phpへPOSTデータは送れていそうです。
（検証ツールのペイロードで確認しました）

[tabuu]

>ajaxの場合は、index.phpを再表示しませんでした。

ソースコードには表示するような処理はありませんが、どのような内容を表示しようとされているのでしょうか？

[yambejp]

index.phpからajaxで自分自身におくるのですか？状況がよくわかりません

[torimingo]

表示の記載がなくすみません。
以下の表示処理を追加しました。
print($_POST["key1"]); //←これが表示されない
フォームで送ると上記の処理で画面に表示されるけど
ajaxだと表示されないのはなぜ？という意味です。

Answer 1

Ajaxの場合、レスポンスはJavaScriptで受け取ることになるので、受け取ったJavaScriptからHTMLを書き換えない限り、見た目上の変化は何も起きません（ブラウザが遷移することはありません）。

Comments

[torimingo]

ありがとうございます。
フォームでPOSTを送ると、送り先に遷移（自分に送った場合は自分を更新）するので、
ajaxでも遷移するものかと思っていましたが違うのですね。

[yambejp]

>ajaxでも遷移するものかと思っていました

遷移させないためのダイナミックな処理がAjaxを利用する目的です

[torimingo]

なるほどです。ありがとうございます。

Answer 2

参考までに
postとXHR(ajax/fetch)の挙動の違い

<?PHP
$x=filter_input(INPUT_POST,"x");
$hoge=filter_input(INPUT_POST,"hoge");
var_dump($hoge);
if($x==="ajax") exit;
?>
<script>
document.addEventListener('click',e=>{
  if(e.target.matches('[name=x][value=ajax]')){
    e.preventDefault();
    const body=new FormData(e.target.form);
    body.append('x','ajax');
    fetch("",{method:"post",body})
    .then(res=>res.text())
    .then(console.log);
  }
});
</script>
<form method="post">
<input type="text" name="hoge">
<input type="submit" value="submit">
<input type="submit" name="x" value="ajax">
</form>