使用 XMLHTTPRequest 根据 php 响应更改变量

Question

我正在尝试编写一个从选择框中删除元素的函数，但前提是该元素未用于其他用途。例如，如果选择框有一个学生姓名列表，它首先检查学生姓名是否在某处使用（或存储在数据库中）。检查脚本会根据名称是否在使用中简单地回显“true”或“false”。如果不再使用该名称，则继续将其删除。否则，它会提醒您。

function removeListItem(selectBox, value)
{
  var removed = 0;
  for (var x = 0; x < selectBox.options.length; x++) {
    if (selectBox.options[x].value == value) {
      var formdata = new FormData();
      var check = "false";
      formdata.append('number', value);
      var ajax = new XMLHttpRequest();
      ajax.open("POST", "check.php");
      ajax.send(formdata);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          check = ajax.reponseText;
          if (check == "true") {
            alert("You have selected a number in use!");
          }
        }
      }
      if (check == "false") {
        selectBox.remove(x);
        removed = 1;
      }
    }
  }
  return removed;
}

问题是它几乎从不运行检查（据我观察），所以当我试图删除我不应该删除的东西时永远不会发出警报。

我认为这与同步与异步 javascript 有关，所以我想知道我应该怎么做才能获得所需的功能。

我想返回已删除，因为当我调用 removeListItem 时它被添加到计数器中。我想要一个计数器，因为 selectBox 允许同时进行多次删除，所以我会跟踪每次删除。

Answer 1

是的，你是对的。 尝试在 onreadystatechange 回调中移除 dom 元素。

你的函数应该返回promise来处理异步请求。因为函数调用会在 XMLHttpRequest 之前完成。

function removeListItem(selectBox, value)
  {
      var promise = new Promise(function(resolve, reject) {
        var removed = 0;
        for (var x = 0; x < selectBox.options.length; x++)
        {
          if(selectBox.options[x].value == value)
          {
            var formdata = new FormData();
            var check = "false";
            formdata.append('number', value);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "check.php");
            ajax.send(formdata);
            ajax.onreadystatechange = function() 
            {
              if (ajax.readyState == 4 && ajax.status == 200) 
              {
                check = ajax.reponseText;
                if(check == "true")
                {
                  alert("You have selected a number in use!");
                  reject();
                } 
                else 
                {
                  selectBox.remove(x);
                  removed = 1;
                  resolve(removed);    
                }
              }
            }
          }
        }
      });

      return promise;
  }

要使用此功能，请调用

removeListItem(selectBox, 1).then(function(removed){ 
  // removed successful
}).catch(function() {
  // doesn't removed
});