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);
}

错误消息：＆＃34;完成操作时出错＆＃34;

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支持承诺或JQuery语法称为延迟。

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

JQuery还附带了一个用于ajax调用的神包装器。

第二个ajax调用不起作用，第二个调用只有在第一个调用成功后才能调用

3 个答案: