意外令牌<错误json

Question

I've been getting this error and and for the life of me i can't figure out what exactly is causing it. What I'm trying to do is retrieve some data from a database and display it on a page but I'm not able to.

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlhttp.responseText != null || xmlhttp.responseText != "That email does not exist in our database") {
            var json = JSON.parse(xmlhttp.responseText);
            var image = json[0]; // or json["Data"]
            document.getElementById("dp").innerHTML =  image;
        } else {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
}

xmlhttp.open("GET", "getemail.php?q=" + str, true);
xmlhttp.send();

and this is the file where im doing the retrieval at

$q = $_GET['q'];

$data = [];
if (!$link) {
    die('Could not connect: ' . mysqli_error($link));
}

$sql="SELECT officer_name FROM officer WHERE email = '$q'";
$result = mysqli_query($link,$sql);
$getName = mysqli_fetch_assoc($result);
$name = $getName['officer_name'];

if($name == null){
    echo "That email does not exist in our database";

} else {
    $sql2="SELECT picture, officer_name FROM officer WHERE email = '$q'";
    $result2 = mysqli_query($link,$sql2);
    $getItems = mysqli_fetch_array($result2);
    $pic = $getItems['picture'];
    $name = $getItems['officer_name'];
    $data = ["image" => "<img style='height:150px; width:150px;' src='image/" . $pic . "'>", "email" => "$q"];
    echo $data;
}

mysqli_close($link);

the console points to the line "var json = JSON.parse(xmlhttp.responseText);" as to where the error is at. I apologise if the solution seems a tad obvious, I've only just started dabbling in this. Thank you for any help provided.

Answer 1

Here is a close proximity to your ajax. I don't have all the other stuff that your js is referencing, so portions of this will fail as is:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
    $("#clicker").click(function() {
        var str =   'test';
        $.ajax({
                url: "getemail.php",
                type: 'get',
                data: { q: str },
                success: function(response) {
                        if(response != null)
                            $("#dp").html(response);
                        else
                            $("#txtHint").html("That email does not exist in our database");
                    }
        });
    });
});
</script>
<div id="clicker">CLICK</div>
<div id="dp">load into</div>
<div id="txtHint">txtHint text hing</div>