mk-toolブログ

エンジニアと家のことをごちゃごちゃと書いてます

【php】AjaxでdataType:'json'が使えない

SyntaxError: JSON Parse error: Unrecognized token '<'

というエラーが出てきて困った。
このエラーを回避するには、html内で

header("Content-Type: application/json; charset=utf-8");

もしくは

header("Content-Type: text/javascript; charset=utf-8");

を記述すればjsonを扱うことができるようになる(私は使うと都合が悪かったです)。

しかしながら、phpを1枚で完結させている場合など、これを使用すると何かと都合が悪いことがある。

AjaxのdataTypeを'JSON'ではなく'text'を指定すれば、おそらく通るようになる。
この場合注意が必要なのが、AjaxでPOSTもしくはGETをした際に動く処理の戻り値が欲しい場合は注意が必要である。

    var data = { hoge: 'huga'};
    $.ajax({
      type: 'POST',
      data: data, // 文字列を指定しても配列を指定してもOK
      dataType: 'text',
      // url: './hogehoge.php', 指定しない場合やurlに誤りがある場合は自分にアクセスされる
    }).done(function(response) {
      alert('response');
    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
        alert(errorThrown);
    });

この、responseの部分はAjax先のphpからのレスポンスを受け取る。
しかしながら、何も考えないで処理をさせると、responseの中には現在表示させているHTMLが全て表示されると思う。
そのため、Ajax先でちょうどいいところまで処理をさせてreturnをしてあげる必要がある。
しかしながら、次はreturnをしたはいいけど、responseには何も入っていない。。。という事象に陥る場合は、
変数をechoやvar_dumpすることでresponseに出てくると思う。

if($_POST['hoge'] == 'huga'){
    echo 'huga';
    return;
}

みたいな感じ。