AJAXでjavascriptからphpにjsonデータを送りたい。

Question

javascriptファイルからphpファイルへjsonデータを送信したいがnullとなってしまう。

前提・実現したいこと

・javascriptにてjsonデータをPHPファイルに送信。
・phpファイルで受け取ったjsonデータを加工。

発生している問題

phpファイルでjsonデータを受け取れず、nullが返ってくる。

該当のソースコード

!function(){
    let btn = document.querySelector('#get');
    btn.addEventListener('click', function(){

        //テストJSONデータ
        var json_data = JSON.stringify({ "Language": "en" });
        //送信先PHP
        var url = "handler";

        //ajax処理開始
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                document.getElementById('out').innerHTML = this.responseText;
            }
        };

        xhr.open('POST', url, true);
        xhr.setRequestHeader("content-type", "application/json;charset=UTF-8");
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(json_data);
    });
}();   

if ($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') {
    die(json_encode(array('stat' => "参照不成功：不正な呼び出し")));
}
// ファイル受け取り
$json = file_get_contents('php://input');
// jsonデコード
$data = json_decode($json, true);
var_dump($data);

対応内容

・送信データのリクエストヘッダーはjson形式に修正。
・ajax送信時のセキュリティ対策として'X-Requested-With'を追加。
（上記の記述を消しても問題は解消しませんでした。）
・ajaxのレスポンスは問題なく、phpファイルに作成したコードの出力は問題なし。

使用ツール

・xampp

追記

PHP Version 8.1.2
確認ブラウザ googleChrome microsoft Edge

※回答者様のローカル環境では問題なく動作確認済み。

お手数かけますがよろしくお願いいたします。

Comments

[退会済みユーザー]

Fiddler などのキャプチャツールを使って調べてみましたか？

[sumou_man]

ありがとうございます。当方、勉強不足でキャプチャツールを使ったことがないです。調べてみます！
（※追記）
FIddler導入してレスポンスコードを確認したところ301のリダイレクト状態になっており、問題解決につながりました！ありがとうございました。

[PlugOut777]

掲示されたソースコードを元に、ローカルで再現させてみようと思ったのですが
該当の症状は発生しませんでした。
(正常にarray(1) { ["Language"]=> string(2) "en" }がHTML内に表示されたという意味です)
そのため、掲示された情報以外の部分に問題が潜んでいる可能性が高いと思います。
（ちなみに再現について、XAMPPは利用していません）

また、何かのバージョン依存の可能性もありますので
ブラウザやPHPのバージョン等を記載しておくと、誰かから何かヒントをもらえるかもしれません。

[sumou_man]

ありがとうございます！正常に表示されてましたか。。。。
仮想環境が原因かもしれないですね。とても助かります。
ブラウザやバージョンについても追記させていただきました。

[PlugOut777]

php8.1.2で試しましたが、やはり再現しませんでした。

ところで一つ気になったのですが
> var url = "handler";
こちら、実際には別のURLに置換されるものかと勝手に思い込んでいたのですが
もしかしてapache側でルーティングの設定を弄っていますか？

[sumou_man]

ありがとうございます。ちょうど今解決しまして、すみません。おっしゃるとおりルーティングでリダイレクトの状態になっておりそれが原因でした。ベストアンサーにしたいのですが回答にコメントいただけませんか？

[PlugOut777]

いえいえ、解決されたのであれば何よりです。
ベストアンサーにこだわりはありませんので、自己解決にして解決内容を書いていただければと思います。

[sumou_man]

とても助かりました。ありがとうございました。

Answer 1

自己解決しました

fiddlerツールを教えていただき、レスポンスコード301（リダイレクト状態）を確認。
コメントのアドバイスを参考にルーティングの設定変更にて解決しました。
お騒がせしました。ありがとうございました。

Answer 2

jsonデータをpostするんですよね？パラメータ名はどうするのでしょうか？

//sample.html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  get.addEventListener('click',()=>{
    const json=JSON.stringify({ "Language": "en" });
    const body=new FormData();
    body.append('json',json);
    const url = "api.php";
    fetch(url,{method:'post',body}).then(res=>res.text()).then(txt=>out.textContent=txt);
  });
});
</script>
<input type="button" value="get" id="get">
<div id="out"></div>

//api.php

<?PHP
$json=filter_input(INPUT_POST,"json");
$data = json_decode($json, true);
var_dump($data);

Comments

[sumou_man]

ご回答ありがとうございます。勉強不足のためご質問の意図がわかりかねます故、お門違いな回答となったら申し訳ありません。

テスト用データとして、jsonデータのパラメータ名は"Language"、値は"en"としております。
本来はもっと長いjsonデータで、あるAPIにjsonデータを送信・結果を加工してページに反映する予定です。
ただ受け渡しがうまくいかないため、できる限り簡略化してjavascriptからphpに受け取るところまで確認しようとしている次第でございます。

[yambejp]

一般にPOST/GETでデータを送るときにはそのデータに対するパラメータ名を別途つけます。
逆に「"Language": "en"」というデータ、つまりLanguageというパラメータ名でenを送りたいなら
JSONにする意味はありません。私の回答の流れが普通のやり方です。なにか不都合があるようでしたら
ご指摘ください

[sumou_man]

いえいえ、ありがとうございます。特に不都合というのはございません。海外のページが複数あるためlanguageはURLから、それ以外は各項目ごとに任意のパラメータを命名するかと思います。（特徴や色などあるためそれぞれ英文字でパラメータにするかと）