◆やりたいこと
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
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="main.js" defer></script> <style> .btn-wrap { widows: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .btn-wrap a { padding: 2rem; background: rgb(0, 110, 255); color: #fff; border-radius: 1rem; text-decoration: none; } </style> </head> <body> <div class="btn-wrap"> <a href="" id="btn">送信</a> </div> </body> </html>
【main.js】
javascript
window.addEventListener("DOMContentLoaded", () => { const btn = document.getElementById("btn"); btn.addEventListener("click", (e) => { e.preventDefault(); let data = {"hoge": "ほげ" }; fetch("recieve.php", { method: "POST", headers: { "Content-Type": "application/json", 'Accept': 'application/json' }, mode:"cors", cache: 'default', body: JSON.stringify(data), }).then(response => { if (response.ok) { return response.json(); } else { throw new Error(`リクエスト失敗: ${response.status} ${response.statusText}`); } }).then((data) => { console.log(data); }).catch((error) => { console.warn(error); }); });});
【recieve.php】
PHP
<?php$my_post = json_decode(file_get_contents("php://input"), true);$data = ["hoge"=>$my_post]; echo json_encode($data);
0 コメント