[js] fetch api のpost通信でパラメータが送れない

Question

[ やりたいこと ]
・inputのname属性[id]がpostされていたら非同期で値を返す

testFech内のconsoleが[SyntaxError: Unexpected end of JSON inputat testFech]となってしまいます。

読みにくいコードで申し訳ありませんが、ご教授いただけますと幸いです。

<form method="POST" name="user">
    <input type="text" name="id"><button id="btn" type="button">送信</button>
</form>

$array = [
    'tokyo' => '東京',
    'osaka' => '大阪',
    'aichi' => '名古屋'
];

header("Content-Type: application/json; charset=utf-8");
$json_array = json_encode($array);
if(isset($_POST['id'])){
    echo($json_array);
}
}

        let btn = document.getElementById('btn');
        let input = document.getElementsByName('id')[0];


btn.addEventListener('click',()=>{
      let value = input.value;
      let param = {id_number:value};

     testFetch(param).then((res)=>{
                    console.log(res);
                });
});


async function testFetch(param){
                const result = await fetch('hoge.php',
               {
                    method:'POST',
                    headers: {
                        'Content-Type': 'application/json'
                        },
                    body:JSON.stringify(param)
                })
                console.log(result.json());
        }

Comments

[退会済みユーザー]

Fiddler などのキャプチャツールを使って要求・応答が期待通りか調べるということはしましたか？

[退会済みユーザー]

result.json() にも await を付与したらどうなりますか？　

Answer 1

質問に対するコメントに返事がないのでいろいろ不明ですが、以下の Fiddler で要求・応答をキャプチャして見た画像のように正しく JSON 文字列が返ってきている API で、

質問者さんのコードと同様に以下の画像のコードで試してみましたが、

console.log の結果は下の画像の赤枠の通りとなり、エラーにはなりません。

ということで、たぶんサーバーから帰ってくる JSON 文字列が不正なのだと思います。だから質問のコメントで「Fiddler などのキャプチャツールを使って要求・応答が期待通りか調べるということはしましたか？」と言ったのですが、確認しましたか？

なお、上の画像で青枠で示した方が await を付与した結果です。たぶん質問者さんが取得したいのはこちらの方だと思いますが、いかが？

Comments

[mirco2001]

ご回答ありがとうございます。
Fiddlerの使い方がわからず調べていたのですが途中でfetchの仕様書を読み直していた所、FormDataを使用できるということがわかり、試してみた所データの取得ができました。

ご丁寧なご回答ありがとうございました。