一个按钮提交AJAX，另一个按钮查询那个AJAX的结果

Question

这个问题是我尝试学习 promises 和 deferreds 的一部分。假设您有一个提交 POST:

的按钮

$("#submit").click( function() {
  $.post({...})
})

我的理解是 AJAX 本身就是一个承诺（这很明显），所以我想做的是，当用户点击 #check 时，它 returns AJAX 完成后的输出（假设 #check 只能在 #submit 被点击后才会被点击）。

我认为这很简单，所以我的初始代码是：

$("#check").click(function() {
  $.when($.post({...})).done( function(data) {
    console.log("data")
  })  
})

但我意识到，在这个实现中，AJAX 在单击 #check 之前不会开始 POSTing。不需要任何 #submit 按钮，AJAX .post 在 #submit 中是多余的。

有没有一种方法可以使用 promises/deferreds 实现我正在做的事情？

Answer 1

您可以在按下 #submit 按钮时创建一个 Promise，然后使用它为 #check 按钮建立处理程序。

$("#submit").click(function() {
  var requestPromise = $.post( "xxx", function(response) {
    // do something here
  })
  .fail(function() {
     alert( "error" );
  })
  $("#check").click(function() {
    requestPromise.done(function(response) {
      // do something meaningful with response here, or other logic
    });
    // disable #check button and remove click handler here
  }
  // enable #check button here
})

编辑 - 根据 OP

的要求

这是使用兼容 Promise 的版本：

    $("#submit").click(function() {
      var requestPromise = new Promise(function(resolve, reject) {
        $.post( "xxx", function(response) {
          // do something here
          resolve(response);
        })
        .fail(function(response) {
           alert( "error" );
           reject(response);
        });
      });
      $("#check").click(function() {
        requestPromise.then(function(response) {
          // do something meaningful with response here, or other logic
        });
        // disable #check button and remove click handler here
      }
      // enable #check button here
    })

Answer 2

只需存储 post 返回的承诺。

var myPromise = null;
$("#submit").click( function() {
  myPromise = $.post({...});
});

$("#check").click(function() {
  if (myPromise) {
    myPromise.then( function(data) {
      console.log("data");
    });
  }
});

我所做的其他更改是使用 then() 而不是 done()（接受成功、失败或进度的单个函数）并且我添加了 statement-ending 个分号（因为自动插入分号杀死小狗）。

学习完 promises 后，请快速转到 observables。有了 JavaScript，乐趣就不会停止。

Answer 3

基于对问题的评论：

i want to submit something via AJAX, but then i want to use the result of that AJAX ONLY LATER when button check is clicked.

你可能把这个复杂化了。你真的不需要剖析 AJAX request/promise/etc。在这两个按钮之间。只需在第一个按钮中发出请求并存储结果，然后在第二个按钮中使用该结果。就这么简单：

// disable the check button until there is a result to check
$('#check').prop('disabled', true);

var ajaxResult;

$("#submit").click( function() {
    $.post({...})
     .done(function (result) {
         // any other logic you want to put here, then...
         ajaxResult = result;
         $('#check').prop('disabled', false);
     });
})

$('#check').click(function() {
    // the result is in ajaxResult, use it as needed here
});

基本上 "check" 按钮与 AJAX 没有任何关系。它只是对内存中存在的数据执行操作。成功获取数据后，该按钮就会启用。

一个按钮提交AJAX，另一个按钮查询那个AJAX的结果

One button submits AJAX, another button queries result of that AJAX

javascript

ajax

jquery

promise

jquery-deferred