Javascript 在html页面中显示JSON响应

我有一个生成JSON类型数据的php文件：

    header('Content-type: application/json');

    if($_POST["id"] == 1){
        $arr = array(
            'firstname' => "John",
            'lastname' => "Doe"
        );
        echo json_encode($arr);
    }

我想使用JQuery AJAX在html页面中显示响应：

$(document).ready(function(){
    $.ajax({
        url: "http://apk.vitka.ir/apk-api/",
        type: "POST",
        dataType: "json",
        data: "id=1",
        success: function(data){
            var person = jQuery.parseJSON(data);
            console.log(person.name);
        },
        error: function(error){
            console.log("Error:");
            console.log(error);
        }
    });
});

我的代码中有什么错误，如何更正？ 然后我想在页面中的html模板中显示重新结果，如下所示：

<div class="someclass">First Name Is : John</div>
<div class="someclass">Last Name Is : Doe</div>

名字是：约翰
姓：Doe

---

我如何做到这一点？

您的问题似乎有点不成熟，但如果您想在HTML中输入名字和姓氏，则需要容器：

<div class="someclass">First Name Is : <span id="firstName"></span></div>
<div class="someclass">Last Name Is : <span id="lastName"></span></div>

$(document).ready(function(){
    $.ajax({
        url: "http://apk.vitka.ir/apk-api/",
        type: "POST",
        dataType: "json",
        data: "id=1",
        success: function(data){
            var person = jQuery.parseJSON(data);
            $('#firstName').text(person[0].firstName);
            $('#lastName').text(person[0].lastname);
        },
        error: function(error){
            console.log("Error:");
            console.log(error);
        }
    });
});

名字是：
姓：
$（文档）.ready（函数（）{
$.ajax({
url:“http://apk.vitka.ir/apk-api/",
类型：“POST”，
数据类型：“json”，
数据：“id=1”，
成功：功能（数据）{
var person=jQuery.parseJSON（数据）；
$（'#firstName'）.text（person[0].firstName）；
$（'#lastName'）.text（person[0].lastName）；
},
错误：函数（错误）{
日志（“错误：”）；
console.log（错误）；
}
});
});

我发现了问题：

---

数据变量已经是已解析的对象，不需要再次解析：）

这会导致错误：“SyntaxError:JSON.parse:JSON数据第1行第2列处的意外字符”应该这样做。