JSでfetchを用いて、POSTで値を受け取りたい

◆やりたいこと
JSでfetchを用いて、POSTで値を受け取りたい

btn.htmlでボタンをクリックしたら、データをrecieve.phpで受け取れるようにしたい。

（本来実施したいことは、自作CMSで投稿記事の並び替えをAjaxで実装したい。
ただ、jQueryに依存せずにfetchを用いて実装したいと思い試したが上手くいかないため、簡易なものを用意して原因を突き止めようとした。
）
◆発生している問題

btn.htmlではコンソールに値が表示されているが、送信先（recieve.php）では値がnullになる。

◆質問内容
何が原因と思われるか知見を頂きたい。

◆試したこと
btn.htmlでは、responceでstatus200となった後のthen((data)"でコンソールに{hoge："ほげ"}と表示されているが、受け取りで値が{hoge: null｝になるため、受け取りファイルのrecieve.phpが問題と推測。

①$_POST　⇒　file_get_contents("php://input")に変更
調べるとjson形式は$_POSTで受け取れない、とあったため変更したが結果はnull.
念のため下記を確認したがいずれもnull
var_dump（json_decode(file_get_contents("php://input"),true)）;
var_dump（file_get_contents("php://input")）;

②検証ツールでNetworkの内容を確認
POSTでnullなので、networkで何かわからないか確認しようとした。

recive.phpのpreviewタブで下記のように表示されている。
{hoge: {hoge: "ほげ"}}
hoge: {hoge: "ほげ"}
hoge: "ほげ"

responseタブでは下記のような表示
{"hoge":{"hoge":"\u307b\u3052"}}

jsの書き方についても、terataillで同様の事例を確認し、成功したとなっている内容を入れ込み。
new FormDataを用いるやり方も実施したが、同様にnull。

◆フォルダ（同一階層）

・btn.html
・main.js
・recieve.php

◆ファイルの中身
【btn.html】

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <script src="main.js" defer></script>
10    <style>
11        .btn-wrap {
12            widows: 100%;
13            height: 100vh;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17        }
18    
19        .btn-wrap a {
20            padding: 2rem;
21            background: rgb(0, 110, 255);
22            color: #fff;
23            border-radius: 1rem;
24            text-decoration: none;
25        }
26    </style>
27</head>
28
29<body>
30    <div class="btn-wrap">
31        <a href="" id="btn">送信</a>
32    </div>
33</body>
34</html>

【main.js】

javascript
1window.addEventListener("DOMContentLoaded", () => {
2    const btn = document.getElementById("btn");
3    btn.addEventListener("click", (e) => {
4        e.preventDefault();
5        let data =  {"hoge": "ほげ" };
6        fetch("recieve.php", {
7            method: "POST",
8            headers: {
9                "Content-Type": "application/json",
10                'Accept': 'application/json'
11            },
12            mode:"cors",
13            cache: 'default',
14            body: JSON.stringify(data),
15        }).then(response => {
16            if (response.ok) {
17                return response.json();
18            } else {
19                throw new Error(`リクエスト失敗: ${response.status} ${response.statusText}`);
20            }
21        }).then((data) => {
22            console.log(data);
23        }).catch((error) => {
24            console.warn(error);
25        });
26    });
27});

【recieve.php】

PHP
1<?php
2$my_post = json_decode(file_get_contents("php://input"), true);
3$data = ["hoge"=>$my_post]; 
4
5echo json_encode($data);
6

maisumakun

2022/11/05 06:33

サーバは何を使っていますか？

bduha184

2022/11/05 07:11

下記３つで試してみました。・Xserver ・ローカルサーバー（Xampp）・ローカルサーバー（Mamp）いずれも同様の状況で、nullとなります。単純なミスに気付いていないだけなような気もするのですが、あきらめてAjaxを使った方が良いような気がしてきました、、、

arcxor

2022/11/05 09:18

提示のコードは問題なく動いています。どうやってサーバ側で受け取った値を確認しましたか？

m.ts10806

2022/11/05 09:31

fetchでもAjaxでもサーバサイドは無関係です。もし動作確認を「recieve.phpをブラウザから直接開いて」確認しようとしているなら確認方法間違ってます。バックグラウンドで実行されて結果だけ受け取るのがfetchもしくはAjaxなので。実際にバックグラウンドだけの動作確認したいのならデバッグツール（XDebugなど）を導入するか、ログファイルに書き出すか。ChromeのPOSTMANプラグインを利用すればバックグラウンドだけの実行確認もできます。

yuma.inaura

2022/11/05 09:38

もしかしてブラウザから直接phpにアクセスしたりしてませんか？その場合は当たり前ですが何もPOSTリクエストを送ってないので結果はnullになるかと思います

bduha184

2022/11/05 09:39

receive.phpのecho json_encode($data);で値を確認しました。念のため、その前の$my_post = json_decode(file_get_contents("php://input"), true);でも値が来ているかも確認したのですが、null　と表示されます。

yuma.inaura

2022/11/05 10:03

入れ違いで他の方のコメントも付いているのでご確認いだければ

行動規範の内容に同意します

回答1件

ベストアンサー

試してみましたが普通に動きますね

php -S localhost:9000 ~/tmp/input.php

php
1<?php
2header('Access-Control-Allow-Origin: *');
3header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
4
5$my_post = json_decode(file_get_contents("php://input"), true);
6$data = ["hoge"=>$my_post];
7
8echo json_encode($data);

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <script>
6    window.addEventListener("DOMContentLoaded", () => {
7    const btn = document.getElementById("btn");
8    btn.addEventListener("click", (e) => {
9        e.preventDefault();
10        let data =  {"hoge": "ほげ" };
11        fetch("http://localhost:9000/", {
12            method: "POST",
13            headers: {
14                "Content-Type": "application/json",
15                'Accept': 'application/json'
16            },
17            mode:"cors",
18            cache: 'default',
19            body: JSON.stringify(data),
20        }).then(response => {
21            if (response.ok) {
22                return response.json();
23            } else {
24                throw new Error(`リクエスト失敗: ${response.status} ${response.statusText}`);
25            }
26        }).then((data) => {
27            console.log(data);
28        }).catch((error) => {
29            console.warn(error);
30        });
31    });
32});
33
34  </script>
35    <meta charset="UTF-8">
36    <meta http-equiv="X-UA-Compatible" content="IE=edge">
37    <meta name="viewport" content="width=device-width, initial-scale=1.0">
38    <title>Document</title>
39    <style>
40        .btn-wrap {
41            widows: 100%;
42            height: 100vh;
43            display: flex;
44            justify-content: center;
45            align-items: center;
46        }
47
48        .btn-wrap a {
49            padding: 2rem;
50            background: rgb(0, 110, 255);
51            color: #fff;
52            border-radius: 1rem;
53            text-decoration: none;
54        }
55    </style>
56</head>
57
58<body>
59    <div class="btn-wrap">
60        <a href="" id="btn">送信</a>
61    </div>
62</body>
63</html>

投稿2022/11/05 09:37

編集2022/11/05 11:05

yuma.inaura

総合スコア1453

bduha184

2022/11/05 09:53

ご確認頂きありがとうございますものすごく勘違いしている気がしてきました、、、送信側（btn.html）ではコンソールで{hoge:’ほげ’}を確認できてまして、recieve.phpのecho json_encode($data);で値を出力したい、と思っているのですが、そもそもrecieve.php側では値を確認（値を出力）できないものなのでしょうか？