使用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);
 }