我在使用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帖子中学习,但我没有得到它?
答案 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调用。分离刷新数据和过滤。