努力在JavaScript中使用Ajax回调

时间:2016-04-30 14:20:23

标签: javascript jquery ajax jquery-callback

我在使用AJAX的JavaScript中实现回调时遇到了一些麻烦。首先,脚本从文件读取并放入变量:

jQuery.get('userdata/' + username + '.txt', function(data) {
    var userid = data;
});

然后在以下函数中使用该变量,该函数从.json文件中读取并选择包含userid中的值的结果。

function loadContacts(filter) {
    var contacts = (function () {
        var contacts = null;
        $.ajax({
            'url': 'userdata/' + username + '.json',
            'dataType': "json",
            'success':  function (data) {
                contacts = data;
                contacts = contacts.filter(function(i) {
                    return i.id == userid;
                });
            }
        });
        return contacts;
    })(); 
    // some code for (filter) here
}

这里的问题是,在jQuery有时间创建userid并从指定的文件中读取之前,loadContacts函数已经尝试从userid读取,所以它回来了一个未识别的变量错误。

我花了最后2/3小时试图学习如何在AJAX中实现回调,但在尝试了不同的变体后我没有运气。

我理解通过实现回调,基本上我推迟loadContacts函数等待jQuery.get成功回复消息,所以它不会尝试先查找userid它已被创建,我似乎无法让它工作。

有人可以帮助我吗?

我已经尝试过从那个duplicate帖子中学习,但我没有得到它?

3 个答案:

答案 0 :(得分:2)

由于AJAX请求是异步的,因此在收到任何数据之前,您将从loadContacts()函数返回一个值。您需要将回调函数传递给可在AJAX请求完成后执行的函数。像这样:

function loadContacts(filter, callback) {
    $.ajax({
        url: 'userdata/' + username + '.json',
        dataType: "json",
        success:  function (data) {
            var contacts = data.filter(function(i) {
                return i.id == userid;
            });
            callback && callback(contacts);
        }
    });
}

function doSomethingWithContacts(contacts) {
   console.log(contacts);
}

loadContacts('foo', doSomethingWithContacts);

答案 1 :(得分:0)

最简单的方法是从第一个get请求的结果中调用loadContacts函数。

var filter = function(){...};
var contacts = false;
jQuery.get('userdata/' + username + '.txt', function(data) {
    var userid = data;
    contacts = loadContacts(filter);
});

您还可以使用jQuery的延迟函数

答案 2 :(得分:0)

如何进入承诺一点点 以异步方式获取数据,同步这些调用并处理数据。

//creating a few "promises"
var pUserId = $.get('userdata/' + username + '.txt');
var pData = $.ajax({
    'url': 'userdata/' + username + '.json',
    'dataType': "json"
});

//filter pData by pUserId, as soon as both are available
var pUserdata = $.when(pUserId, pData).then(function(userId, data){
    return data.filter(function(item){
        return item.id === userId
    })
});

//just log these three, as soon as they are available
$.when(pUserId, pData, pUserdata).done(function(userId, data, userdata){
    console.log("userId:", userId);
    console.log("data:", data);
    console.log("userdata:", userdata);
});

它取决于你,你想如何把它包装成特定的功能。

并且不要将过滤器与执行ajax调用的函数混合使用。因为每次你想要这个数据的子集时你必须进行ajax调用。分离刷新数据和过滤。