Fetch APIを使ったPOST送信で、配列データがPHP側で変換できない。

Question

Fetch APIを使って配列データをPOST送信したいのですが、PHP側で配列データを受け取ることができません。
JSON.stringifyでjson化しているのですが、どこか間違っている個所はありますでしょうか。

//送信元
// FetchAPIのオプション準備
const ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>";
const params = new FormData();
params.append("import_data", JSON.stringify(import_data) );
const option  = {
	method: "POST",
	credentials:"same-origin",
	header: {
		'Content-Type': 'application/json'
	},
	//リクエストボディ
	body: params,
};

//受信側

//$_POST['import_data']の中身 json_encodeをかけると中身が空になる。

    [import_data] => [{\"会員No\":\"1001\",\"姓\":\"山”田\",\"名\":\"太郎\",\"姓フリガナ\":\"ヤマダ\",\"名フリガナ\":\"タロウ\",\"郵便番号\":\"9190000\",\"国\":\"JP\",\"都道府県\":\"北海道\",\"市区郡町村\":\"札幌市\",\"番地\":\"222\",\"ビル名\":\"\",\"電話番号\":\"\",\"FAX番号\":\"\",\"Eメール\":\"[e-mail]\",\"入会日\":\"2021-08-02 17:36\",\"ランク\":\"0\",\"保有PT\":\"0\"},{\"会員No\":\"1000\",\"姓\":\"山田\",\"名\":\"太郎\",\"姓フリガナ\":\"ヤマダ\",\"名フリガナ\":\"タロウ\",\"郵便番号\":\"910-0000\",\"国\":\"JP\",\"都道府県\":\"北海道\",\"市区郡町村\":\"札幌市\",\"番地\":\"111\",\"ビル名\":\"\",\"電話番号\":\"\",\"FAX番号\":\"\",\"Eメール\":\"[e-mail]\",\"入会日\":\"2021-08-02 17:34\",\"ランク\":\"0\",\"保有PT\":\"0\"}]

Comments

[Lhankor_Mhy]

PHPは素人なので分からないのですが、これは参考になりますか？
https://stray-light.info/wp/magic_quotes_gpc/

[Anon_]

ものすごく関係ありそうです。
マジッククォートの存在を忘れていました。
確認してみます。

[Anon_]

ビンゴのようです。またこの存在を忘れそうで怖いです・・汗
何度も助けていただき、本当にありがとうございます。

[Anon_]

次があればぜひ回答のほうにどうぞ。BAがつけられませんので。

[Lhankor_Mhy]

ご解決されて何よりです。
ありがとうございます。お役に立てそうであれば、回答欄に記入させていただきます。

Answer 1

$_POST['import_data']の中身 json_encodeをかけると中身が空になる。

json_decodeするのでは？

//sample.php

<?PHP
print_r( json_decode($_POST["import_data"],JSON_OBJECT_AS_ARRAY));

const params=new FormData();
const import_data=[
  {"会員No":"1001","姓":"山田","名":"太郎","姓フリガナ":"ヤマダ","名フリガナ":"タロウ","郵便番号":"9190000","国":"JP","都道府県":"北海道","市区郡町村":"札幌市","番地":"222","ビル名":"","電話番号":"","FAX番号":"","Eメール":"[e-mail]","入会日":"2021-08-02 17:36","ランク":"0","保有PT":"0"},
  {"会員No":"1000","姓":"山田","名":"太郎","姓フリガナ":"ヤマダ","名フリガナ":"タロウ","郵便番号":"910-0000","国":"JP","都道府県":"北海道","市区郡町村":"札幌市","番地":"111","ビル名":"","電話番号":"","FAX番号":"","Eメール":"[e-mail]","入会日":"2021-08-02 17:34","ランク":"0","保有PT":"0"}
  ];
params.append("import_data",JSON.stringify(import_data));
const option  = {method: "POST",body: params,};
fetch('sample.php',option).then(res=>res.text()).then(console.log);

Comments

[Anon_]

ごめんなさい。json_decodeすると空になると書いたつもりが記載できておりませんでした。

[yambejp]

回答の通りテストして確認できませんか？

[Anon_]

json_decodeの第二引数は指定しておりませんでしたので、こちらを指定しましたが内容は変わりませんでした。
受け手では下記のように記述してログを確認しております。

my_log($_POST, '$_POST');
$import_data = json_decode($_POST["import_data"],JSON_OBJECT_AS_ARRAY);
my_log($import_data, '$import_data');

[Anon_]

$_POSTのログの中身は質問文に掲載した通りなのですが、json_decodeで空になっております。
タイポなどはないように思います。

[yambejp]

modeとimport_dataの関係はなんなんでしょう？
私のソースをコピペで実行して動くのかどうかまずテストしてください

[Anon_]

modeは不要でしたので削除しました。
import_dataをコピペして下記のコードを修正しましたが、結果は全く同じでした。
ログのデータを見ると、JSONを[]で囲われている事が原因でjson_decodeできないように思われるのですが、いかがでしょうか。

let test_data =[
{"会員No":"1001","姓":"山ああ田","名":"太郎","姓フリガナ":"ヤマダ","名フリガナ":"タロウ","郵便番号":"9190000","国":"JP","都道府県":"北海道","市区郡町村":"札幌市","番地":"222","ビル名":"","電話番号":"","FAX番号":"","Eメール":"[e-mail]","入会日":"2021-08-02 17:36","ランク":"0","保有PT":"0"},
{"会員No":"1000","姓":"山田","名":"太郎","姓フリガナ":"ヤマダ","名フリガナ":"タロウ","郵便番号":"910-0000","国":"JP","都道府県":"北海道","市区郡町村":"札幌市","番地":"111","ビル名":"","電話番号":"","FAX番号":"","Eメール":"[e-mail]","入会日":"2021-08-02 17:34","ランク":"0","保有PT":"0"}
];
params.append("import_data", JSON.stringify(test_data) );
const option = {
method: "POST",
//リクエストボディ
body: params,
};

[yambejp]

動作確認のためもっと簡易的なデータでチェックすることをおすすめします。
例示のtest_dataなら間違いなくjsonデータとしてPHP側で受け取れます

[Anon_]

import_dataのデータを減らしても同様の結果でした。
PHP側で受け取ったPOSTのdecode前のデータが[]で囲われている点については何かわからないでしょうか。
多分これがネックになっていると思うのですが。

[yambejp]

＞ POSTのdecode前のデータが[]で囲われている点については何かわからないでしょうか。

なんの問題もありません
print_rで出力したテキストをテキストとして確認するのは
理解していますか？

[Anon_]

https://dev.digitra.net/tools/jsonfairing.php

では上記のようなサイトでdecodeに失敗するのは何故でしょうか。

[yambejp]

根本的なところで勘違いしていませんか？

PHPからJSONデータを返してほしいなら
<?PHP
echo $_POST["import_data"];

で十分ですよ？

[Anon_]

$_POST["import_data"]の中身が　[{\"会員No\":\"1001\"},{\"会員No\":\"1000\"}]

勘違いはしてないと思うのですが、上記のデータを受け取ってそれをPHPの連想配列の形に戻して処理をしたいのですが、その場合にjson_decode()を使用する手順は何か間違っているのでしょうか。。

[yambejp]

再度確認、以下一言一句変えずにコピペしてコンソールに何が表示されますか？
//sample.php
<?PHP
print $_POST["import_data"];
?>

//script
<script>
let test_data =[
{"会員No":"1001"},
{"会員No":"1000"}
];
const url="sample.php";
const body=new FormData();
body.append("import_data", JSON.stringify(test_data));
fetch(url,{body,method:"post"}).then(res=>res.text()).then(console.log);
</script>

[yambejp]

コンソールに
[{"会員No":"1001"},{"会員No":"1000"}]
と表示されるなら正しいですが

"[{\"会員No\":\"1001\"},{\"会員No\":\"1000\"}]"
と表示されるなら何らかの理由で二重にエンコードされていると思います

[Anon_]

WordPress上でのPOSTなので、上記のコードは一言一句変えずにというのが実質できません。
試しに JSON.stringify()を外してみたところ、下記のように取得されます。
これは正しい挙動だと思います。

【$_POST】Array
(
[import_data] => [object Object],[object Object]
)

[yambejp]

print $_POST["import_data"];
をお願いしているのにArray(・・・)が変えるはずがありません
質問者さんが勝手に何か手を加えている部分が
悪影響していると思います。

[Anon_]

本当に何も手は加えてないですよ。
リファラチェックと処理に入る前のmodeは受け取っていますが、json_decodeとは無関係だったのであえて記載はしていませんでした。

check_ajax_referer('action', 'nonce');　//無視
$mode = isset($_POST['mode']) ? $_POST['mode']: '';　//無視

print_r($_POST['import_data']);
return;

上記のようにprint_rしたところ、fetchのcatchにて下記エラーがでました。

SyntaxError: Unexpected token \ in JSON at position 2

[Anon_]

別の方の指摘で解決できました。
色々コメントいただきありがとうございました。

Answer 2

https://stray-light.info/wp/magic_quotes_gpc/

マジッククォートが原因でバックスラッシュが挿入されていたようです。

$import_data = $_POST['import_data '] ?? '';
if($import_data){
    $import_data = is_array($_POST['import_data ']) ? array_map('stripslashes_deep', $_POST['import_data ']) : stripslashes($_POST);
    $decode_import_data= json_decode($import_data, true);

/*
【$decode_import_dataの中身】
Array
(
    [0] => Array
        (
            [会員No] => 1001
        )

    [1] => Array
        (
            [会員No] => 1000
        )
*/
}

Comments

[yambejp]

ごくろうさま、今後環境依存のものは事前に調べて質問下さい

[Anon_]

そこに気づけるならそもそも質問してないと思います^^;
何度も$_POSTの中身とコードは提示しているので、そこを責めだしたら誰も質問できないですよ笑