使用JavaScript读取从REST API返回的JSON数据

Question

以下代码应该只是向我发出我希望从JSON文件中获取的值的警报。 问题是它没有给我任何回报:(.。下面是JSON文件的链接：

https://rest.soilgrids.org/query?lon=5.39&lat=51.57

如果您不知道， Soil Grids API是一种API，用于为您提供有关土地质量的特定纬度和经度的土壤信息。

我必须承认，我不知道出什么问题了。 下面是我的代码：

 var soil = new XMLHttpRequest(); function testFunction (){ soil.open("REST", "https://rest.soilgrids.org/query?lon=5.39&lat=51.57", false); soil.send(null); var r = JSON.parse(soil.response); var majorreal = r.properties.TAXNWRBMajor; alert(majorreal); } 

 <button onclick="testFunction()">Submit</button> 

每当程序运行时，我都会收到XMLHttpRequest的发送错误...

"Uncaught NetworkError: Failed to execute 'send' on
'XMLHttpRequest': Failed to load 'https://rest.soilgrids.org/query
lon=5.39&lat=51.57'.",

任何帮助，将不胜感激 ;）。

Answer 1

问题是没有REST方法（ 请参阅https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open ）。

使用GET 。

 var soil = new XMLHttpRequest(); function testFunction (){ soil.open("GET", "https://rest.soilgrids.org/query?lon=5.39&lat=51.57", false); soil.send(null); var r = JSON.parse(soil.response); var majorreal = r.properties.TAXNWRBMajor; alert(majorreal); } 

 <button onclick="testFunction()">Submit</button> 

同样也没有理由使用同步调用。

Answer 2

常见的惯例是遵循以下模式。 这样，您就可以通过检查ready状态属性来对结果进行处理。

function testFunction (){
 var soil = new XMLHttpRequest();
    soil.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
      }
    };
   soil.open("GET", "https://rest.soilgrids.org/query?lon=5.39&lat=51.57", false);
   soil.send(null);
 }