如何獲取JSON數據並存儲到變量中。

Question

我有一個這樣的變量文件。

var geography = [ 
        { id:"Country", header:"", width:150}, 
        { id:"Capital", header:"Capital", width:150}, 
        { id:"Falg", header:"Falg", width:150}, 
        { id:"Language", header:"Language", width:150}, 
        {id:"Population", header:"Population", width:150}, 
       ], 

現在我想從json加載這些數據。我將這些數據放入JSON文件並使用此代碼。

getGeography function(){ 
     var geography; 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.open("GET", "data.json",true); 
    } 

現在從這裏如何存儲到一個變量並返回。

Answer 1

當xmlhttp的就緒狀態爲4且響應狀態爲200時，應該讀取它。您應該使用JSON.parse（）解析響應。但是，您不能從函數返回值。因爲默認情況下XMLHTTPRequest是異步的。

function getGeography() { 
var geography; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("GET", "data.json",true); 
xmlhttp.onreadystatechange = function() { 
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
    geography = JSON.parse(xmlhttp.responseText;) 
    } 
} 
} 

而不是返回地理，你必須以編程方式讀取AJAX請求完成時的地理價值。像這樣的東西（read this）：

而不是

寫這樣的代碼：

function anotherFunc() { 
var geography = getGeography(); 
thenDoSomething(geography); 
} 

這樣寫：

function anotherFunc() { 
getGeography(); 
} 
function getGeography() { 
var geography; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("GET", "data.json",true); 
xmlhttp.onreadystatechange = function() { 
    if(xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
    geography = JSON.parse(xmlhttp.responseText); 
    thenDoSomething(geography); 
    } 
} 
} 

這就像交出代碼的其餘部分的執行控制getGeography（）函數，而不是期待函數的返回值，然後使用該值。當AJAX調用完成時，getGeography（）函數使用從AJAX響應接收到的值繼續執行其餘代碼。

Answer 2

我不是jQuery的粉絲，但在這種情況下，你可能會從中受益。

$.get("ajax/test.html", function(data) { 
    // data is your result 
    console.log(data); 
    console.log(JSON.parse(data)); 
}); 

https://api.jquery.com/jquery.get/

Answer 3

下面是如何使用XMLHttRequest（）：

<script> 
    const req = new XMLHttpRequest(); 
    var geography = []; 
    req.onreadystatechange = function(event) { 
     // XMLHttpRequest.DONE === 4 
     if (this.readyState === XMLHttpRequest.DONE) { 
      if (this.status === 200) { 
       geography = JSON.parse(this.responseText); 
       console.log(geography); 
       alert("Great Success : check console !"); 
      } else { 
       alert("Something has gone really Bad !"); 
      } 
     } 
    }; 

    req.open('GET', 'data.json', true); 
    req.send(null); 

謹慎使用JSON正確：

[ 
    {"id":"Country","header":"","width":150}, 
    { "id":"Capital","header":"Capital", "width":150}, 
    { "id":"Falg","header":"Falg","width":150}, 
    { "id":"Language","header":"Language", "width":150}, 
    { "id":"Population", "header":"Population", "width":150} 
]