第二个ajax调用不起作用，仅在第一个成功后才应调用第二个

Question

我有两个ajax调用，第二个应该仅在第一个ajax成功之后才触发。 每次第一个ajax返回成功，但第二个总是出错。

function proceedWithUnlock(target, address, PARAMS) {

  target.style.backgroundColor = 'yellow';
  target.nextElementSibling.innerHTML = 'processing....';
  target.nextElementSibling.style.backgroundColor = 'yellow';

  var client = new XMLHttpRequest();
  client.onreadystatechange = function() {
    // in case of network errors this might not give reliable results
    if (this.readyState == 4) {
      if (this.status == 200) {
        if (this.responseText.match('Success')) {
          target.nextElementSibling.innerHTML = 'Success!!!';
          target.nextElementSibling.style.backgroundColor = 'lightgreen';
          lockTheNumber(target, address1, PARAMS1);
        } else {
          target.nextElementSibling.innerHTML = 'FAILED';
          target.style.backgroundColor = 'red';
          target.nextElementSibling.style.backgroundColor = 'red';
        }
      } else {
        target.nextElementSibling.innerHTML = 'FAILED';
        target.style.backgroundColor = 'red';
        target.nextElementSibling.style.backgroundColor = 'red';
      }
    }
  }
  client.open("POST", address);
  client.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  client.send(PARAMS);

}

function lockTheNumber(target, address1, PARAMS1) {

  target.nextElementSibling.nextElementSibling.innerHTML = 'processing....';
  target.nextElementSibling.nextElementSibling.style.backgroundColor = 'yellow';


  client.onreadystatechange = function() {
    // in case of network errors this might not give reliable results
    if (this.readyState == 4) {
      if (this.status == 200) {
        if (this.responseText.match('Success')) {
          target.nextElementSibling.nextElementSibling.innerHTML = 'Success11111!!!';
          target.nextElementSibling.nextElementSibling.style.backgroundColor = 'lightgreen';
          target.style.backgroundColor = 'lightgreen';
        } else {
          target.nextElementSibling.nextElementSibling.innerHTML = 'FAILED 1';
          target.style.backgroundColor = 'red';
          target.nextElementSibling.nextElementSibling.style.backgroundColor = 'red';
        }
      } else {
        target.nextElementSibling.nextElementSibling.innerHTML = 'UNABLE TO BLOCK 2';
        target.style.backgroundColor = 'red';
        target.nextElementSibling.nextElementSibling.style.backgroundColor = 'red';
      }
    }
  }
  client.open("POST", address);

  client.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  client.send(PARAMS);
}

错误消息：“完成操作错误”

Answer 1

创建一个新的XMLHttpRequest对象，而不是重用旧的对象。 它超出范围。

...
target.nextElementSibling.nextElementSibling.style.backgroundColor = 'yellow';
var client = new XMLHttpRequest();
client.onreadystatechange = function() {
...

Answer 2

您的其他XMLHttpRequest对象超出范围。 您需要在第二个函数中创建一个新对象：

function lockTheNumber(target, address1, PARAMS1){

target.nextElementSibling.nextElementSibling.innerHTML = 'processing....';
target.nextElementSibling.nextElementSibling.style.backgroundColor = 'yellow';

var client = new XMLHttpRequest();
client.onreadystatechange = function() {

Answer 3

您已经添加了jquery标记，因此我认为您也可以利用该库。 JQuery支持Promise或在JQuery语法中称为deferred。

这有助于使用then运算符构造ajax调用。文档中的更多信息： https : //api.jquery.com/deferred.then/

JQuery还带有一个用于ajax调用的包装器。