Question

我想从.json文件中获取一些数据并在另一个js文件中使用它。通过教程，我明白你需要使用ajax函数来调用.json文件。我使用了以下函数，但是警报（结果）没有显示任何值.somone plss help ???

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);

Answer 1

因为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_get_json函数，然后可以在其他JS文件中调用ajax_get_json。

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

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

Answer 2

您的alert在AJAX onreadystatechange回调之前执行。

尝试在回调内的results=data.user;行之后移动它。

Answer 3

AJAX是异步的。因此，当您的AJAX请求完成时，您的alert已被调用。您需要将alert放在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()

Answer 4

这是怎么回事。您声明数据和结果，进行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()

Answer 5

为了得到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

我希望这会对你有所帮助

导入和使用.json文件的内容

5 个答案: