使用AJAX和JSON显示来自PHP的HTML内容

我试图从包含以下代码的php文件中检索信息。我的代码包含colums的电子邮件、名字、姓氏和州

$query = 'SELECT * FROM users WHERE LOWER(Email) = :email';
$stmt = $dbh->prepare($query);
$stmt->bindValue(':email', $email);
$stmt->execute();

if ($stmt->rowCount() == 1) {
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $firstName = $row['FirstName'];
    $lastName = $row['LastName'];
    $state = $row['State'];     
} echo json_encode($row);

我的Ajax代码是：

$.ajax({
    datatype: 'json',
    type: "POST",
    url: 'json-data.php',         
      success: function(data) {
        //called when successful
        $('#firstname').append(data.FirstName);     
      },
      error: function(e) {
        //called when there is an error
        //console.log(e.message);
      }

}))

当我键入

$（'#firstname'）。追加（数据），它向我显示以下输出：

{"FirstName":"Foo","LastName":"Bar","State":"Florida","Email":"foo@bar.com"}

如何设置它，以便只获取名字并将其附加到div中？
尝试：

var obj = jQuery.parseJSON(data);
$('#firstname').append(OBJ.FirstName); 

您的代码看起来是正确的。什么具体不起作用？当我使用
$（'#firstname'）.append（data.firstname）进行追加时，它不会显示
但当我使用
$（'#firstname'）时，它会这样做
但当我只查找一个元素时，此方法输出整个数组。我发现了错误，我使用的不是
数据类型
，而是
数据类型
…>。必须进行编辑才能使其正常工作，但确实如此。多谢各位$（“#firstname”）.append（obj.firstname）；有没有一种方法可以不用像Sedz说的那样再次解析它呢？我发现了我的错误，而不是“数据类型”，我使用的是“数据类型”