javascriptのfetchAPIでphpプログラムと通信すると以下のようなエラーが出てくる時があります.
Uncaught SyntaxError: Unexpected token < in JSON at position 0
「<」の部分は場合によっては異なる文字だったりしますが、たいてい1文字です.
このエラーはjavascript側ではjson形式を想定しているのに、phpプログラムがjson形式をechoしていないときに生じます.例えば、以下のようなコードでは上記のエラーが生じます.
<!-- index.html --> <html> <body> <button class="test">hoge</button> </body> </html> <script> let btn = document.querySelector('.test') btn.onclick = function(){ const url="test.php" fetch(url) .then(res => res.json()) // javascript側ではjsonが返ってくると思っている .then(data => console.log(data)) } </script>
<?php echo 'hello'; // phpはjsonではなくstringを返している exit;
解決方法は単純で、php側をきちんとjson形式にするか、javascriptのres.json()をres.text()にすれば良いです.
番外編になりますが、自分は以下のようなコードを書いてよくこのエラーに出くわします.
<!-- index.html --> <html> <body> <button class="test">hoge</button> </body> </html> <script> let btn = document.querySelector('.test') btn.onclick = function(){ const url="test.php" fetch(url) .then(res => res.json()) // javascript側ではjsonが返ってくると思っている .then(data => console.log(data)) } </script>
<?php ... /* データベースと通信してデータを取得し、$results[]という連想配列にpush */ echo var_dump($results); // デバッグ用にvar_dump. こいつが原因 echo json_encode($results); // phpはjsonではなくstringを返している exit;
要はphp側でechoしたものがすべてjavascript側に送られるので、php側から送るデータの形式は統一しないとだめってことですね.