为什么我不能立即使用$ .getJSON（）的结果？

Question

我想让我的$ .getJSON工作，但它什么都不返回。这里是我的jQuery：

$('#courseSelect').bind('change', function() 
{ 
    data = $.getJSON('lessons.js'); 
    var html ='<select name="lessonSelect id="lessonSelect">'; 
    var len = data.length; 
    alert(data.length); //this alerts "undefined" 
    for (var i = 0; i< len; i++) { 
     html += '<option value="' + data[i].value + '">' + data[i].name + '</option>'; 
    } 
    html +='</select>'; 
    alert(html); //this alerts <select...></select> 
    //but no option tags because there's nothing to loop through 
    $('lessonsDiv').html(html); 
}); 

这是我lessons.js文件

{"lessons": 
    [ 
      {"value": "1", "name": "Lesson 1"}, 
      {"value": "2", "name": "Lesson 2"}, 
      {"value": "3", "name": "Three"} 
    ] 
    } 

最后，我想要做的是首先选择课程时创建的教训新的选择列表。但现在，我只是想让getJSON方法起作用，但事实并非如此。如果有人能看到有什么问题，那就太好了。它是否期待着一种不同的数据？

Answer 1

致电getJSON()是asyncho;结果不能立即提供。从getJSON()返回的是​​对象，该对象监视异步请求的状态。

您需要注册回调（这是第二个参数的用途），该回调在之后执行响应可用。正在处理异步请求的jqXHR对象将在请求成功完成后自动执行回调。

$('#courseSelect').bind('change', function() { 
    $.getJSON('lessons.js', function(data) { 
     var html = '<select name="lessonSelect id="lessonSelect">'; 
     var len = data.length; 
     alert(data.length); //this alerts "undefined" 
     for (var i = 0; i < len; i++) { 
      html += '<option value="' + data[i].value + '">' + data[i].name + '</option>'; 
     } 
     html += '</select>'; 
     alert(html); //this alerts <select...></select> 
     //but no option tags because there's nothing to loop through 
     $('lessonsDiv').html(html); 
    }); 
});​ 

一旦你做到了这一点，data将是一个对象，如;

var data = {"lessons": 
[ 
     {"value": "1", "name": "Lesson 1"}, 
     {"value": "2", "name": "Lesson 2"}, 
     {"value": "3", "name": "Three"} 
] 
}; 

所以，你会真正需要使用data.lessons访问你有阵列（和data.lessons.length检索它的长度）。

Answer 2

你的下面的代码：

data = $.getJSON('lessons.js') 

不起作用。 AJAX不同步。它是，as its name says,异步。这意味着你不等到答案回来。你指定一个回调函数来处理收到的数据。

例如：

$.getJSON('lessons.js', handleDatas) 
// This function will be executed when the datas come back 
function handleDatas(data) { 
    // use the `data` variable here 
} 

尽管它通常使用的方式：

$.getJSON('lessons.js', function(data) { 
    // use the `data` variable here 
} 

在那里，我们使用一个匿名函数作为回调。

欲了解更多信息，请看jQuery documentation的例子。