Javascript 导入并使用.json文件的内容

我想从一个.json文件中获取一些数据，并在另一个js文件中使用它。通过教程，我了解到您需要使用ajax函数来调用.json文件。我使用了以下函数来实现这一点，但是警报（结果）没有显示任何值。somone plss能帮上忙吗

var results;
var data;
function ajax_get_json() {

    var hr = new XMLHttpRequest();
    hr.open("GET", "Test2.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            //results=document.getElementById("results");                              
            //results.innerHTML=data.user + " " +data.country;
            results = data.user;

        }
    }

    hr.send(null);

    //results.innerHTML = "requesting...";
    }
ajax_get_json()
    alert(results);

---

在AJAX

onreadystatechange

回调之前执行您的

警报

尝试将其移动到
results=data.user之后行，在回调内部。
AJAX是异步的。因此，当AJAX请求完成时，您的
警报已经被调用。您需要将
警报
放在AJAX函数中：

var results;
var data;

function ajax_get_json() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "Test2.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function () {
        if (hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            //results=document.getElementById("results");                               
            //results.innerHTML=data.user + " " +data.country;
            results = data.user;
            alert(results);
        }
    }
    hr.send(null);
    //results.innerHTML = "requesting...";
}
ajax_get_json()

发生的事情就是这样。声明数据和结果，进行ajax调用，创建警报，ajax调用返回。由于警报是在ajax调用完成之前创建的，因此警报框不会显示任何内容

Ajax调用是异步完成的，因此需要将警报移到回调中

var results;
var data;
function ajax_get_json(){

   var hr = new XMLHttpRequest();
   hr.open("GET", "Test2.json", true);
   hr.setRequestHeader("Content-type", "application/json",true);
   hr.onreadystatechange = function() {
       if(hr.readyState == 4 && hr.status == 200) {
           var data=JSON.parse(hr.responseText);
           alert(data.user);

       }
  }
  hr.send(null);
}
ajax_get_json()

为了得到Json，我使用了ajax调用，它很有效。这是一个样本

$.ajax({
    url: "sample.json",
    dataType: 'json',
    contentType:"application/json",
    success: function(response) {
        //here you can use the response
            //response can be passed to what ever js file you need.

    },
    error: function(response1){
            alert('response error')
    }
});

这里sample.json是一个本地文件，您可以使用json所在的url

我希望这将帮助您
因为AJAX请求是异步的，浏览器在执行其他代码之前不会等待它完成。因此，在请求完成之前会调用警报

使您的函数可重用，允许您请求任何文件，并传入一个回调函数，以便在完成时执行：

function ajax_get_json(file, callback) {

    var hr = new XMLHttpRequest();
    hr.open("GET", file, true);
    hr.onreadystatechange = function() {
        var data, results;
        if(hr.readyState == 4 && hr.status == 200) {
            data=JSON.parse(hr.responseText);
            results=data.user;
            callback(results);
        }
    }

    hr.send(null);

}

// request a file and do something with the contents when complete
ajax_get_json("Test2.json", function(results) {
    alert(results);
});

// request a different file and do something else with the contents
ajax_get_json("Test3.json", function(results) {
    console.log(results);
});

编辑

刚才在另一条评论中看到，您希望在另一个文件中使用结果

在某种helpers.js文件中包含
ajax\u get\u json
函数，然后可以在其他js文件中调用
ajax\u get\u json

或者，如果您确实需要在不同的脚本中使用相同的结果，则必须将结果存储在
窗口中
：

ajax_get_json("Test2.json", function(results) {
    alert(results);
    window.resultsCache = results;
    // window.resultsCache now available to all scripts on the page
});

为什么需要AJAX来加载JSON文件？而且，现在您正在使用AJAX，AJAX是异步的，所以在调用警报时，AJAX还没有准备好
表示您正在向服务器发送JSON。你不是。你甚至都没有提出发帖请求。去掉它。实际上，我想在另一个.js文件中使用data.user，所以我希望它保留其值。这就是为什么我希望警报语句在Ajax之外工作不容易实现。因为您是以异步方式工作的，所以您必须以不同的方式思考问题。Zougen Moriver的回答为您提供了一个更好的方法。实际上，我希望在另一个.js文件中使用data.user，因此我希望它保留其值。这就是我希望alert语句在ajax之外工作。我希望结果值（或data.user）要在外部使用，这需要jQuery—我也尝试了下载jQuery的方法，但它向我显示了一个响应错误msgresponse错误，如果您对JSON有问题，可能会出现。一旦检查你的JSON是否有效，我尝试使用你建议的函数，就像你建议的那样，但是我在另一个.js文件thejsonvalue=window.resultcache中这样赋值；然后做一个警告（thejsonvalue），它是未定义的。问题是这个值只保留在ajax_get_json（）函数中，之后它似乎丢失了这个值，将它添加为
窗口的属性肯定会将它暴露给页面上的所有脚本。问题可能与您原来的问题相同-当您尝试访问另一个js文件中的
window.resultCache
时，请求仍然没有完成。您是否需要在多个文件中使用
ajax\u get\u json
的结果？如果没有，只需在需要的地方用回调函数调用一次
ajax\u get\u json
，而不必将其缓存到
窗口
。我基本上想要实现的是使用.json文件中的值，使用sprite.add（）方法来定位精灵。因此基本上我需要json文件中存储的x和y位置，如so game.add.sprite（xvalue，yvalue，name）wer xvalue和yvalue是json文件中的值。因此，你看，我需要实际使用函数中的值，而不仅仅是显示它。如果你需要使用json文件结果的帮助，这是另一个问题，或者阅读教程。我希望我上面的代码已经回答了你在本页上的问题：）我会尽量保持在函数范围内。thx