Ajaxでポストしたデータが、送り先側の＄_POSTで取得できない（基礎？）

Question

##追記１
JSON.stringify({"first_name":"一郎", "last_name":"鈴木"})
のJSON.stringifyを省くことで手動入力した{"first_name":"一郎", "last_name":"鈴木"}は正しく$_POSTとして取得できました。ありがとうございました。

どうも間違っていた部分がありました。
JSON.stringify() の利用はフォームに入力された配列データをjson形式にする際に必要な物でした
（問題の切り分けのため、手動でデータを入力してテストしていました。余計な混乱を与え申し訳ありません）

で、その部分のコードはこのようになっています。

data: JSON.stringify($("#form").serializeArray()),
          JSONエンコード            配列

このdata をconsole.logに吐き出してみると、その実態は
[{"first_name":"一郎", "last_name":"鈴木"}]
のように、先ほどの手動入力のjsonデータ{"first_name":"一郎", "last_name":"鈴木"}が[]でくくられるような形式でした。

ちなみに正確なデータは

[{"name":"0","value":"生年月日"},{"name":"1","value":"氏名"}]

jsonのデータとしては間違っていないような気がしますが、これが問題なのでしょうか？
また、このようなフォームの値をポストしたい場合、みなさんはどうされていますか？

##最初の投稿
###Ajaxでポストしたデータを受けた受け側で値を取得したい

##該当のソースコード
###main.html

$.ajax({
    url: '/test.php',
    type: 'post',
    data: JSON.stringify({"first_name":"一郎", "last_name":"鈴木"}),
    dataType: "json",
    contentType: 'application/json',
    success: function(result, textStatus, xhr) {
        console.debug(result);
        alert('OK');
    },
    error: function(xhr, textStatus, error) {
        alert('NG...');
    }
});

###/test.php

<?php
echo json_encode(['result'=>$_POST]);

###結果(コンソール) orz

result: Array[0]

###ご教授ください
根本的にajaxの利用の仕方を理解していないのですが、よろしくご教授ください
※可能であれば、ajaxで呼ばれた側のdebugの仕方のヒントになるようなサイトなど教えていただけると幸いです

Answer 1

どういった戻り値を期待しているかによりますが

jsonで出し入れする場合

$.ajax({
    url: '/test.php',
    type: 'post',
    data: {"first_name":"一郎", "last_name":"鈴木"},
    dataType: "json",
    success: function(result, textStatus, xhr) {
        console.debug(result);
    },
});

textで出し入れする場合

$.ajax({
    url: '/test.php',
    type: 'post',
    data: JSON.stringify({"first_name":"一郎", "last_name":"鈴木"}),
    dataType: "text",
    success: function(result, textStatus, xhr) {
        console.debug(result);
    },
});

Comments

[ssmxgo]

詳細までありがとうございます！
テスト用データに誤って付けてしまっていたようです。追記を書きましたのでもしよろしければ冒頭だけ目を通していただけたら幸いです。

Answer 2

ajax のデバッグですが、Chrome 等の開発ツールで通信内容を確認すると捗ります。
Chrome の例で言うと、
F12 → Network → POST 先のファイル名の選択
で、通信内容を確認することが出来ます。
headers 内の POST 内容と Responce を確認することで、問題ファイルの特定が可能となります。

Comments

[ssmxgo]

これは勉強になりました！！！
コレを見る限り、contentTypeの指定をコメントアウトしても
Request Headers
Accept:application/json,
になってますねぇ。ということは$_POSTの取得はそもそも不可能ということになるのかなぁ(汗)

Answer 3

contentType: 'application/json',
JSON.stringify()
はいらないです
test.phpは
$result = array("result"=>$_POST);
echo json_encode ($result);
などとします。
データを調べるときは要素の検証などを出した後
Object
をクリックするとデータが出てきます。

Comments

[ssmxgo]

きた！！！！出来ました。
どうも根本的に、JSON.stringify() の扱いの理解がわかってないようでした

[ssmxgo]

と、思いましたがすみません、テスト用データに誤って付けてしまっていたようです。追記を書きましたのでもしよろしければ冒頭だけ目を通していただけたら幸いです。

Answer 4

contentType: 'application/json' 、JSON.stringify() で送る場合、 JSON形式で送るので、PHP側は $_POST で受け取れません。

$json = file_get_contents('php://input');
$data = json_decode($json, true);
echo json_encode( array("result" =>  $data  ));

のようにしないと取得できません。
この件のデータでは普通に送ればいいので不要ですね。

Comments

[ssmxgo]

結果的に、予備知識になりましたが衝撃です。
追記を書きましたが、formからデータをserializeArrayで取得しそれをjsonエンコードするのに JSON.stringify を使わざるを得ません…が、そうすると受け口は file_get_contents を使わないといけないのでしょうか？
それとも、contentTypeを指定しなければ$_POSTで取得できるのでしょうか？

結構複雑過ぎて驚いています

[退会済みユーザー]

質問が変わってますね…　そういうデータを送るときには　いわゆる普通のPOST　name1=val1&name2=val2 のようなデータにならないので　その方法で送るわけです。

[ssmxgo]

なるほど…、理解できたかもしれません。
かつ、ご指摘とおりfile_get_contentsで取得することが出来ました。
ということは、jsonを使う場合はfile_get_contentsがセット
POSTで受け取りたい場合はserializeをセット
というような形で使うのですね。根本的にfile_get_contents('php://input');を知りませんでした恥

[ssmxgo]

完璧です、理解できました！！！！
今まで悩んできたので大変助かりました。ありがとうございました。