json_decode(file_get_contents('php://input'), true)が空になる

Question

前提・実現したいこと

Ajaxを使ってJavascriptからphpにデータを送ったのですが、保存されたファイルを見てみると、.csv Filesize 0となっていて名前と内容がありません。

$post_data = json_decode(file_get_contents('php://input'), true)が上手く作動していないと思うのですが、何が違うのか教えていただけないでしょうか。

javascript,phpともにエラーは出ていません。

該当のソースコード

main.js

function saveData(name, data){
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'write_data.php'); // 'write_data.php' is the path to the php file described above.
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({filename: name, filedata: data}));
}

//最後
//jsPsych.data.get()は問題なく作動しています。
//ファイル名はid+random_string（作成済み）.csvとしたいです。
saveData(prolificid + random_string, jsPsych.data.get().csv());

write_data.php

<?php
  $post_data = json_decode(file_get_contents('php://input'), true);
  // the directory "data" must be writable by the server
  $name = "/var/www/data/".$post_data['filename'].".csv";
  $data = $post_data['filedata'];
  // write the file to disk
  file_put_contents($name, $data);
?>

補足情報（FW/ツールのバージョンなど）

PHP ver7.4

Comments

[退会済みユーザー]

そんなやり方、どこかで紹介されていましたか？ 今どきならjQueryほかjsライブラリを扱うともっと楽にかけるのですけど。

Answer 1

jQueryを使っていない事例を探すと、一応見つかりました。
どこがどう違うか見比べてみて、真似してみるといいかと。

④POSTで送信したデータをPHPで処理して戻す。
もしくは
XMLHttpRequest の利用 - Web API | MDN の「フォームの投稿とファイルのアップロード」のあたり。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ってのを加えればPOST送信っぽくなるかと。