如何获取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} 
]