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}
]

如何获取JSON数据并存储到变量中。

3 个答案: