使用jQuery+PHP做AJAX请求时JSON解析报错问题咨询

在用户提交表单时，我用PHP结合jQuery AJAX做验证，遇到一个奇怪的问题：尝试用var jsonData = JSON.parse(response)把PHP返回的响应转成JS对象时，会抛出错误Uncaught SyntaxError: "[object Object]" is not valid JSON；但直接用var jsonData = response却能正常运行。我原本以为PHP应该返回JSON字符串，而不是对象，附上AJAX请求代码和PHP后端代码，求问题原因和解决办法。

AJAX请求代码 #

let nombre = $nombre.value.trim();
let apellidos = $apellidos.value.trim();
let correo = $correo.value.trim();
let telefono = $telefono.value.trim();

$.ajax({
    url: '../includes/email-check.php',
    type: 'POST',
    data: {nombre, apellidos, correo, telefono},
    success: function(response){
        var jsonData = JSON.parse(response);
        console.log(jsonData);

        if(jsonData.email === true && jsonData.phone === true){
            $formInput.submit();
        }else{
            if(jsonData.email === false)
                showError($correo, "El correo ya existe, ingresa otro.");
            if(jsonData.phone === false)
                showError($telefono, "El teléfono ya existe, ingresa otro.");
        }   
    },
    error: function(jqXHR,textStatus, errorThrown){
        console.error("AJAX Error:",textStatus,errorThrown);
    }
});

PHP后端代码 #

require dirname(__DIR__) . "../db.php";

// 获取AJAX请求发送的数据
$nombre = $_POST['nombre'];
$apellidos = $_POST['apellidos'];
$correo = $_POST['correo'];
$telefono = $_POST['telefono'];

if(!empty($correo) && !empty($telefono) && !empty($nombre) && !empty($apellidos)){
    $text = "/^[a-zA-ZáéíóúÁÉÍÓÚäëïöüÄËÏÖÜàèìòùÀÈÌÒÙ\s]+$/";

    $message = [
        "name" => true,
        "lastnames" => true,
        "email" => true,
        "phone" => true,
    ];

    if(strlen($nombre) < 3 || strlen($nombre) > 30 || !preg_match($text,$nombre))
        $message["name"] = false;
    
    if(strlen($apellidos) < 5 || strlen($apellidos)>60 || !preg_match($text,$apellidos))
        $message["lastnames"] = false;

    $stmt = $conn->prepare("SELECT * FROM socio WHERE correo = :email OR telefono = :telephone");
    $stmt->bindParam(':email', $correo);
    $stmt->bindParam(':telephone', $telefono);
    $stmt->execute();

    $stmt -> setFetchMode(PDO::FETCH_ASSOC);
    $result = ($stmt -> fetchAll());
    
    if(!empty($result)){
        foreach($result as $row){
            if($row["correo"] === $correo)
                $message["email"] = false;
            elseif ($row["telefono"] === $telefono)
                $message["phone"] = false;
        }
    }

    // 将PHP数据转为JSON格式返回
    Header('Content-Type: application/json; charset=UTF8');
    echo json_encode($message);
}

问题原因 #

jQuery的AJAX方法会自动根据响应的Content-Type头解析返回数据：

• 你的PHP代码已经设置了Header('Content-Type: application/json; charset=UTF8')，所以jQuery会自动把返回的JSON字符串解析成JavaScript对象，直接传给success回调的response参数。
• 此时再调用JSON.parse(response)，相当于把JS对象转成字符串（得到"[object Object]"）后尝试解析JSON，这不符合JSON语法规范，因此抛出SyntaxError。

解决办法 #

直接使用response即可，无需再调用JSON.parse：

success: function(response){
    console.log(response);

    if(response.email === true && response.phone === true){
        $formInput.submit();
    }else{
        if(response.email === false)
            showError($correo, "El correo ya existe, ingresa otro.");
        if(response.phone === false)
            showError($telefono, "El teléfono ya existe, ingresa otro.");
    }   
}

额外优化建议 #

• 在AJAX配置里显式指定dataType: 'json'，强制jQuery按JSON格式解析响应，即使后端Content-Type头出现异常也能正常解析：

$.ajax({
    url: '../includes/email-check.php',
    type: 'POST',
    data: {nombre, apellidos, correo, telefono},
    dataType: 'json', // 新增该行
    success: function(response){
        // 直接使用response
        // ...
    },
    // ...
});

• 确保PHP代码没有输出额外内容（比如空格、换行、错误提示），否则会破坏JSON格式导致解析失败。可以在echo json_encode($message);后添加exit;或die();，避免后续代码输出内容。

内容的提问来源于stack exchange，提问作者Daniel Tecla