JSON返回undefined

Question

我有这个脚本：

function showProduct(str) {
    if (str == "") {
        //if inputfield is empty the divs will be empty
        document.getElementById("nameHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
                var jsonObject =  this.responseText;
                document.getElementById("nameHint").innerHTML = jsonObject["name"];
                document.getElementById("priceHint").innerHTML = jsonObject["price"];
}
        };
        xmlhttp.open("GET","/getproduct/q="+str,true);
        xmlhttp.send();
    }
}

稍后在文件中我有一个输入字段，如果我放了一个条形码，这个脚本就会运行并且会返回（这是计划）两个div s中产品的名称和价格（{{ 1}}和nameHint）。

priceHint在开始时是空的，如果我在输入字段中输入了一个小号，那么我得到了div。

如果我用undefined替换var jsonObject = this.responseText;部分代码并将条形码放在输入字段中，var jsonObject = JSON.parse(this.responseText);仍为空，在控制台中我可以看到以下输出：

  

SyntaxError：JSON.parse：后面的意外非空格字符   JSON数据的第1行第44列的JSON数据

我错过了什么？怎么解决？

修改

后台控制器：

div

EDIT2：

从日志返回：

public function getProduct($id){
    ini_set('display_errors', 1);error_reporting(E_ALL);

    $sql = DB::select('select * from inventory where barcode = ?', [$id]);
    $name = $sql[0]->name;
    $price= $sql[0]->price;

    echo json_encode(array("name"=>$name, "price"=>$price));
}