Question

嘿，我正在尝试制作 XMLHttpRequest 获得 JSON ，然后将特定字段插入HTML。< / p>

例如，只插入Angelo的name，lastname和age数据，每个字段位于不同的HTML元素中

问题是我无法在HTML元素中获取正确的数据，它在HTML元素name

中不断出现。

我的老板不允许我使用jQuery

HTML

<h2>Nombre</h2>
<h3 class="name" id="name">Alex</h3>
<br>
<h2>Segundo Nombre</h2>
<h3 class="lastname">Synshit</h3>
<br>
<h2>Edad</h2>
<h3 class="age">199</h3>

JS

function loadProfile(){

  var xmlhttp = new XMLHttpRequest();
  var url = "../json/perfil.json";

  xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      document.getElementById("name").innerHTML=myArr[0];
      }
  };

  xmlhttp.open("GET", url, true);
  xmlhttp.send();


}

JSON

{
    "angelo":{
            "Name":"Angelo",
            "LastName":"Giuseppe",
            "Age":19
        },

      "hugo":{
            "Name":"Hugo",
            "LastName":"Dóminguez",
            "Age":25
        },

      "edgar":{
            "Name":"Edgar",
            "LastName":"Villareal",
            "Age":35
            },

        "salvador":{
            "Name":"Salvador",
            "LastName":"Ramirez",
            "Age":20
            }
}

Answer 1

在行document.getElementById("name").innerHTML=myArr[0];上，您正在索引到一个数组，但您的JSON文件包含一个对象。您必须将其更改为myArr.angelo或更改您的JSON文件以包含数组。

Answer 2

格式化json的方式不正确。像这样设计你的json，你应该能够访问你现在访问的方式。

[
  {
    "Name": "Angelo",
    "LastName": "Giuseppe",
    "Age": 19
  },
  {
    "Name": "Hugo",
    "LastName": "Dóminguez",
    "Age": 25
  },
  {
    "Name": "Edgar",
    "LastName": "Villareal",
    "Age": 35
  },
  {
    "Name": "Salvador",
    "LastName": "Ramirez",
    "Age": 20
  }
]

如何创建一个将JSON数据插入HTML的XMLHttpRequest？

2 个答案: