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

Second ajax call is not working , the second one should be called only after the first one is sucess

本文关键字：调用 第二个 第一个 成功 ajax 工作      更新时间：2023-09-26

我有两个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);
}

错误信息:"Error in completion operation "

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

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

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

function lockTheNumber(target, address1, PARAMS1){
target.nextElementSibling.nextElementSibling.innerHTML = 'processing....';
target.nextElementSibling.nextElementSibling.style.backgroundColor = 'yellow';
var client = new XMLHttpRequest();
client.onreadystatechange = function() {

您已经添加了jquery标记，因此我认为您也可以利用该库。JQuery支持承诺，或者在JQuery语法中它被称为延迟。

这有助于用then操作符构建ajax调用更多信息见文档:https://api.jquery.com/deferred.then/

JQuery还提供了一个很好的ajax调用包装器

相关文章：