InstascanをもちいてQRコードを読み込み、その値をもちいて処理を行うプログラムを作成しておりJSON形式で値を得たいのですがphpの中身がまるごと返てきてしまっています(以下のエラーが出ます)。

SyntaxError: Unexpected token < in JSON at position 0

以下のajaxはInstascanで読み込んだあとに実行され、idには読み込んだQRコードの値(数字限定)が入るようになっています。

どのような変更を行えば良いかご教授願います。

$.ajax({
 type: "POST",
 url: "search.php",
 data: { "id": id },
 dataType: "json",
}) .done (function(data, textStatus, jqXHR) {
 console.log("OK!!");
 console.log(data.name);
}) .fail (function(jqXHR, textStatus, errorThrown) {
 console.log("Error!!");
});

search.php

<?php
 $id = $_POST["id"];
 $name = 'ブックマーク';
 //SQLでidを処理し、一致するnameを返す予定。
 $arr = array(
  'id' => $id,
  'name' => $name
 );
 header('Content-type:Application/json; charset=utf8');
 echo json_encode($arr);
?>

--追記--
簡易的なプログラム(一部省略)を書いて試しましたが上のプログラムと同様のエラーが発生しうまく行きません。
ちなみにphp単体で叩くと

{"id":null,"name":"ブックマーク"}

このように適切にjson形式で返ってきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="ボタン">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
    $("[type=button]").on("click", function() {
      $.ajax({
        type: "POST",
        url: "sample.php",
        data: {"id": "020001"},
        dataType: "json"
      }) .done (function(data) {
        console.log("ok");
        console.log(data.name);
      }) .always(function(){
        console.log("hahaha");
      });
    });
});
</script>
</body>
</html>

sample.php

<?php
  $id = $_POST["id"];
  $arr = array(
    "id" => id,
    "name" => "ブックマーク"
  );
  header("Content-type:Application/json;charset=utf8");
  echo json_encode($arr);
?>