javascript - 等待jquery中getJSON完成的回调

Question

我有这样的事情：

<div id="content"></div>

和JS：

function getData(id) {
    $.getJSON('url/to/jsondata',{id: id}, function(data) {
         /** append some data to div#content  **/
         $('#content').data('key', 'value');
     });

然后我想在脚本中获取#content 的数据：

$(document).ready(function() {
    getData(1); // run getData with some id
    console.log($('#content').data('key'));
});

问题是在 getJSON 完成回调后 console.log 没有运行，所以我在日志中得到一个未定义的值。哪个是让它工作的正确方法？感谢！

Answer 1

从 ajax 函数返回延迟对象并对其使用 always、done 或 fail 方法：

function getData(id) {
    return $.getJSON('url/to/jsondata',{id: id}, function(data) { //return this
         $('#content').data('key', data);
     });
}

$(document).ready(function() {
    getData('content').always(function() { //is returned as deffered object
        console.log($('#content').data('key')); //runs when ajax completed
    });
});​

Answer 2

您已经在调用中定义了回调getJSON。要获得结果，请将您的 console.log 代码放在与/** append some data to div#content **/注释相同的函数中。

这是 getJSON 的 jQuery 文档，因此您可以查看哪个是正确的参数以及如何布置它：http ://api.jquery.com/jQuery.getJSON/

Answer 3

您应该将日志调用放在回调函数中，如下所示：

function getData(id) {
    $.getJSON('url/to/jsondata',{id: id}, function(data) {
         /** append some data to div#content  **/
         $('#content').data('key', 'value');

         console.log($('#content').data('key'));
     });