从 AJAX 请求中获取数组值 [重复]

Question

我有一个脚本，它读取一个 JSON 文件，然后用每个元素的 name 属性填充一个数组。

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];

var myMethod = function(){
    $.ajax({
        url : "numbers.json",
        dataType : "json",
        success : function(data){
            for(i in data){
                a.push(data[i].name);
            }
        }
    });
}

myMethod();
console.log(a[2]); // console.log() returns "undefined"
</script>

JSON

[
    {"name" : "One"},
    {"name" : "Two"},
    {"name" : "Three"},
    {"name" : "Four"},
    {"name" : "Five"}
]

我无法访问此数组的特定索引。控制台日志总是返回 undefined。我尝试在我的 ajax 调用之后添加 .then()，但它也不起作用。

Answer 1

您的console.log(a[2]); 在AJAX 完成处理之前运行，因为AJAX 的异步性质，这就是它返回undefined 的原因。将 console.log 放入 AJAX 成功。查看工作的 sn-p：

var a = [];

var myMethod = function(){
    $.ajax({
        url : "https://api.myjson.com/bins/b4bnr",
        dataType : "json",
        success : function(data){
            for(i in data){
                a.push(data[i].name);   
            }
           console.log(a[2]);
        }
    });
}

myMethod();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您可以阅读有关 AJAX 工作原理的更多信息here。

Answer 2

当 ajax 调用完成时，myMethod 函数完成，并移至下一行，即 console.log。只有在对 numbers.json 的请求返回后才会执行成功。试试这个：

var a = [];

var myMethod = function(){
    $.ajax({
        url : "numbers.json",
        dataType : "json",
        success : function(data){
            for(i in data){
                a.push(data[i].name);
            }
            console.log(a[2]);
        }
    });
}

myMethod();

Answer 3

你会想做这样的事情：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];

var myMethod = function() {
    $.ajax({
        url: "numbers.json",
        dataType: "json",
        success: function(data) {
            for (i in data) {
                a.push(data[i].name);
            }
            handleData();
        }
    });
}

function handleData() {
    console.log(a[2]);
}

myMethod();
</script>

Javascript 不会等待您的所有代码逐行运行，因此对于异步调用，您需要一个单独的函数来处理数据或在成功回调中处理数据。另一个函数会更简洁，但取决于您要对数据执行的操作。

Answer 4

您正在使用$.ajax 函数运行异步请求，因此您应该等待响应，然后在从服务器端收到响应时调用console.log 内部成功回调，否则console.log 将不起作用，因为查询未决：

success : function(data){
     for(i in data){
         a.push(data[i].name);
     }
     console.log(a[2]);
}

希望这会有所帮助。