ぷるぷるの雑記

低レイヤーがんばるぞいなブログ. 記事のご利用は自己責任で.

Uncaught SyntaxError: Unexpected token < in JSON at position 0の解決方法

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側から送るデータの形式は統一しないとだめってことですね.