Question

我试图打印出名为favColor的JSON元素。我可以看到favColor中包含response.data，但由于某种原因我无法使用response.data.favColor访问它。

如果我将response.data打印到控制台，我会收到以下信息：

{"favColor":"green"}

但是，response.data.favColor会返回undefined。

我的表格：

  <form>
      <label>Favorite Color: </label>
      <br>
      <input id="favColor" name="favColor" type="text">
      <input type="submit" value="Submit POST Data" id="submitPost">
  </form>
  <br>
  <div>
      <label>Favorite Color:</label>
      <div id=returnedFavColor></div>
  </div>

我的剧本：

document.addEventListener('DOMContentLoaded', post);

function post() {
    document.getElementById('submitPost').addEventListener('click', function(event) {
        var req = new XMLHttpRequest();
        var payload = {favColor: null};
        payload.favColor = document.getElementById('favColor').value;
        req.open("POST", "https://httpbin.org/post", true);
        req.setRequestHeader('Content-Type', 'application/json');
        req.addEventListener('load',function(){
            if(req.status >= 200 && req.status < 400){
                var response = JSON.parse(req.responseText);
                console.log(response.data);
                document.getElementById('favColor').textContent = response.data.favColor;
            } else {
                console.log("Error in network request: " + request.statusText);
            }
        });
        req.send(JSON.stringify(payload));
        event.preventDefault();
    });
}

Answer 1

好像你对数据进行了双重编码。 response.data的控制台输出{"favColor":"green"}证明它是一个字符串（如果它是一个对象，你会看到类似Object { ... }的东西）。

您应该在服务器端修复它，以便您的数据不包含嵌套的JSON，并且您的代码可以正常工作。

访问JSON元素返回undefined

1 个答案: