JavaScriptのfetchを使ってJSONをPOST形式で送ったデータをPHPファイルで取得したい

Question

以下が試したコードです。

<button id="button">Fetch</button>

<script>
const array = {"word1": 'hoge', "word2": 'fuga'};

document.getElementById('button').addEventListener('click', () => {
	fetch('sample.php', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(array)
	}).then(response => response.text())
	.then(text => console.log(text));
});
</script>

$word1 = $_POST['word1'];
$word2 = $_POST['word2'];

echo "word1: ${word1}, word2: {$word2}";

想定している console.log で出力されるコードは word1: "hoge", word2: "fuga" なのですが、 word1: , word2: と出力されてしまいます。

どなたかご教授してもらえないでしょうか?

Comments

[退会済みユーザー]

JSON は $_POST に展開されないので標準入力より取得してください。

Answer 1

formdataで処理するのが楽

<script>
window.addEventListener('DOMContentLoaded',()=>{
  const obj = {"word1": 'hoge', "word2": 'fuga'};
  const body = Object.entries(obj).reduce((o,x)=>(o.set(x[0], x[1]), o), new FormData());
  document.querySelector('#button').addEventListener('click',()=>{
    const method="POST";
    const headers={Accept:'application/json'};
    fetch('sample.php',{method,headers,body})
      .then(res=>res.text())
      .then(console.log);
  });
});
</script>

<button id="button">Fetch</button>

• sample.php

<?PHP
print json_encode($_POST);
?>

Comments

[sonu]

ありがとうございます。勉強になりました。