编辑-请查看底部的注释,了解为什么我不认为这是重复的问题
使用jquery 3.2.1和Bootstrap 3.3.7
我的部分应用程序具有以下流程:
用户单击ID为#notifierModal
这将产生第一个ajax请求,该请求将写入用户存储有关用户选择的首选项的数据库(每个选择都是步骤1的锚点-单击可打开/关闭该首选项)。此ajax请求的响应为JSON,格式如下:
{result: "success", message: "Notification preference has been updated"}
如果发生错误-就进行数据库更新而言-JSON为
具有相似的结构,但会包含{result: "error"}
和适当的消息。
发出了一个第二个ajax请求,以更新模式(#notifierModal
)的内容。这是在步骤2中更新数据库中的首选项后有效地“刷新”模态中显示的数据。
在#notifierModal
内更新步骤2的响应给出的结果(成功或错误消息)。
我的问题-我已经使用以下ajax实现了上述功能:
// Step 1
$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
e.preventDefault();
// Step 2
$.ajax({
url: $(this).attr('href'),
method: 'get'
}).then(function(response2) {
// Step 3
$.ajax({
url: '/notifier-modal',
method: 'get'
}).then(function(response3) {
$('#notifierModal .modal-body').html(response3);
}).done(function() {
// Step 4
if (response2.result == 'error') {
$('#notifierModal .modal-body .outcome').html(response2.message);
}
if (response2.result == 'success') {
$('#notifierModal .modal-body .outcome').html(response2.message);
}
});
});
});
但是,如果我将.then()
的两个实例都替换为.done()
,则其工作方式完全相同。
在继续进行第二个ajax请求(步骤3)之前,我试图确保第一个ajax请求(步骤2)完成。我已阅读有关承诺和How do I chain three asynchronous calls using jQuery promises?
上的信息我不明白为什么使用.done()
会得到相同的结果,哪种方法是正确的?我很高兴可以对js进行其他改进,但是我的问题是关于单独使用.done()
与.then()/.done()
方法之间的区别吗?
我的应用程序正在“运行”-从某种意义上说,这两种方法都可以提供相同的结果-但我觉得自己犯了一个错误,因为我不了解这些方法之间的区别。请有人可以澄清一下吗?
不是重复项:有人建议这是jQuery deferreds and promises - .then() vs .done()的重复项。我不认为这是因为它说:
处理返回结果的方式也有所不同(称为链接,
done
不链接,而then
产生调用链)
我已经将回调中的变量更新为response2
和response3
,以显示它们在js中处于哪个步骤。但是,无论我使用response2
还是.done()
,我都可以在步骤4中使用.then()
(从步骤2开始)。那怎么可能?结果就是我想要的,但是我不明白它的工作方式,这令人担忧。
答案 0 :(得分:2)
这个问题是重复的。 jquery-deferreds-and-promises-then-vs-done
简而言之:
wine_list = Wine.objects.filter(
id__in=other_users_reviews_wine_ids
).annotate(
mean=Avg('rating')
).order_by('-rating')
答案 1 :(得分:0)
如果我正确理解了您要执行的操作,似乎您需要使用步骤2的响应来更新模式内容,但仅在加载步骤3中的内容之后才可以。 如果这是问题所在,则:
$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
e.preventDefault();
// Step 2
$.ajax({
url: $(this).attr('href'),
method: 'get'
}).then(function(outcome) {
// Step 3
$.ajax({
url: '/notifier-modal',
method: 'get'
}).then(function(response) {
$('#notifierModal .modal-body').html(response);
// Step 4
if (outcome.result == 'error') {
$('#notifierModal .modal-body .outcome').html(outcome.message);
}
if (outcome.result == 'success') {
$('#notifierModal .modal-body .outcome').html(outcome.message);
}
});
});
});