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

时间:2017-02-14 23:48:57

标签: javascript json rest api

以下代码应该只是提醒我希望从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'.",

任何帮助将不胜感激;)。

2 个答案:

答案 0 :(得分:3)

问题在于没有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>

也没有理由使用同步电话。

答案 1 :(得分:0)

常见的惯例是遵循以下模式。这允许您通过检查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);
 }