Question

使用youmightnotneedjquery.com中的示例版本，我试图将JSON放入我的页面，该页面存储在与HTML和JS相同的文件夹中。我的问题是我不熟悉XMLHttpRequest库，我一直在寻找的答案是＆＃34;使用jQuery或其他一些库。＆＃34;我在函数中添加了console.log();，因此我可以看到我是否达到成功或失败，因为我没有收到数据。原始示例为here，我的代码如下。 cv.json存在，格式正确，函数正在向控制台发送Success?，但我无法将JSON数据存入我的cv变量。

如果它是相关的，我会在公共保管箱文件夹中托管JSON，HTML和JS文件，这似乎不是问题的一部分。

   var cv;

  request = new XMLHttpRequest();
  request.open('GET', 'cv.json', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400){
      // Success!
      console.log("Success?");
      console.log(request.resonseText);
      cv = JSON.parse(request.responseText);
    } else {
      // We reached our target server, but it returned an error
      console.log("Error?");
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();

注意：在stackoverflow上有很多类似的问题，但我还没有找到我遇到的具体问题的答案;对于熟悉JavaScript的人来说，这个答案太明显了，无法明确提及，或者我错误地对我的搜索进行了短语。

更新：在Web检查器中，我可以在源代码中看到json文件，并且响应200 和所有数据，以便可以访问和读取文件，我只是没有正确地把它变成变量。代码已更新，以反映request.send();的正确使用情况。

Answer 1

request.send不返回任何内容，它会创建一个解析值的处理程序。在这个添加的顶层：

var cv;

然后在onload函数的成功部分改变你的返回：

cv = JSON.parse(request.responseText);

Answer 2

阻止JSON在页面上显示但仍可从控制台获取的两个问题是

未正确加载变量（由于this answer已解决）
~~以异步方式加载文件！（由于this similar question and it's answer已解决）~~
感谢this comment，我出去开始了解回调的过程。 JSON加载现在是一个作为回调的函数。它没有得到优化我确信，但足以满足我目前的需求/能力

这是工作代码。 ~~重大变化是第3行的false。~~

var cv;

var loadJSON = function() {
  request = new XMLHttpRequest();
  request.open('GET', 'cv.json', true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400){
      cv = JSON.parse(request.responseText);
    } else {
      // We reached our target server, but it returned an error
    }
  };

  request.onerror = function() {
    // There was a connection error of some sort
  };

  request.send();
};

没有jQuery的JSON

2 个答案: