Question

另一天，另一个问题。我正在将我的网站从jQuery重写为vanilla ES6，我的表单有问题。以前我在jQuery .done()和.error()上触发了不同的操作，它运行得很好，但现在我的指定操作会在xhr.addEventListener("error", e => { code }上触发，但不会在xhr.addEventListener("load ", e => { code }上触发。< / p>

以下是我的代码：

form.addEventListener("submit", e => {
  e.preventDefault();
  for (let i = inputFail.length; i--; ) {
    inputFail[i].remove();
  }
  if (validateForm()) {
    const formData = new FormData(form);
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("error", e => {
      console.log("error");
      const failPL = "Nie udało się, spróbuj jeszcze raz.";
      const failENG = "Something went wrong, please try again.";
      const postFail = document.createElement("div");
      const failText = document.createElement("p");
      postFail.classList.add("form__fail");
      postFail.classList.add("fade-in-out");
      if (langPL.classList.contains("button--lang--active")) {
        failText.innerText = failPL;
        postFail.appendChild(failText);
        form.appendChild(postFail);
      } else {
        failText.innerText = failENG;
        postFail.appendChild(failText);
        form.appendChild(postFail);
      }
      setTimeout(() => {
        postFail.remove();
      }, 5000)
    });
    xhr.addEventListener("load ", e => {
      console.log("success");
      const successPl = 'Dziękuję za wiadomość!';
      const successENG = 'Thank you for your message!';
      const postSuccess = document.createElement("div");
      const successText = document.createElement("p");
      postSuccess.classList.add("form__success");
      postSuccess.classList.add("fade-in-out");
      form.reset();
      if (langPL.classList.contains("button--lang--active")) {
        successText.innerText = successPl;
        postSuccess.appendChild(successText);
        form.appendChild(postSuccess);
      } else {
        successText.innerText = successENG;
        postSuccess.appendChild(successText);
        form.appendChild(postSuccess);
      }
      setTimeout(() => {
        postSuccess.remove();
      }, 5000)
    });
    xhr.open("POST", form.action);
    xhr.send(formData);
  }
})

所以基本上当我关闭互联网连接并对表单进行总结时，会触发一个错误事件，并在表单中附加一个带有错误文本的漂亮红色div，让用户知道POST失败并且他/她应该再试一次。我希望在成功提交之后与form.reset()有类似的东西，但它只是不起作用。我从表单中收到一封电子邮件，因此它正常工作，但似乎“加载”事件不会触发。我也试过了xhr.status === 200和xhr.readyState === 4，但又一次，没有运气。那么 - jquery .done()形式方法的确切等价是什么？

我将非常感谢所有帮助，但请不要建议坚持使用jQuery。

Answer 1

但不在xhr.addEventListener("load"

那里有一个额外的空间。改为

inputFail.forEach(element => element.remove());

请注意，您可以通过

自动遍历inputFails

for

您当前的.innerText循环语法也存在问题。（第二部分是while条件，而不是增量器/减量器）

另外，请勿使用IE不太可靠的.textContent，而是使用标准方法setTimeout(() => { postSuccess.remove(); }, 5000)。

您可以简化此

setTimeout(postSuccess.remove, 5000);

到

apply

因为它是一个独立的函数，因此可以作为参数本身传递。

对成功的XMLHttprequest表单POST的操作不会触发，但我确实收到了电子邮件

1 个答案: