typeof 与 ajax 响应没有按预期工作

Question

我正在尝试使用 AJAX 和 PHP 创建简单的表单验证，但typeof的使用没有按预期工作。

它运行良好，除非我得到一个空响应，这意味着所有字段都已通过验证。

在这种情况下，什么都不会发生，最后一个输入仍然保留其错误类，并且 Cart div没有按照成功请求的预期更改为 Success div 。

JSON 中的典型响应：

{
  last_name: "The Last name is required", 
  email: "The Email is required", 
  city: "The City is required", 
  np_branch: "The Np branch is required"
}

显然，如果其中一个值通过了 PHP 验证，则不会将其添加到数组中。 请注意，每个键的错误值可能会根据错误发生变化，因此检查错误消息不是一种选择。

代码：

$.ajax({
  type: "POST",
  dataType:"json",
  data: {
    last_name: l_name.val(),
    email: email.val(),
    city: city.val(),
    np_branch: np_branch.val()
  },
  success: function(data) {
    console.log(data);
    // If all fields passed validation we hide the Cart div and show the Success div
    if (typeof(data['last_name']) == "undefined" && typeof(data['email']) == "undefined" && typeof(data['city']) == "undefined" && typeof(data['np_branch']) == "undefined") {
      $('.cart').css({ "display":"none" });
      $('.success').css({ "display":"block" });
    }
    // Checking whether the response contains a last_name error
    if (typeof(data['last_name']) != "undefined" && data['last_name'] !== null) {
      l_name.addClass("error");
      $('#l_name-err').css({ "display":"block" });
    } else if (l_name.hasClass('error')) {
      l_name.removeClass("error");
      $('#l_name-err').css({ "display":"none" });
    }
    // Checking whether the response contains a email error
    if (typeof(data['email']) != "undefined" && data['email'] !== null) {
      email.addClass("error");
      $('#email-err').css({ "display":"block" });
    } else if (email.hasClass('error')) {
      email.removeClass("error");
      $('#email-err').css({ "display":"none" });
    }
    // Checking whether the response contains a city error
    if (typeof(data['city']) != "undefined" && data['city'] !== null) {
      city.addClass("error");
      $('#city-err').css({ "display":"block" });
    } else if (city.hasClass('error')) {
      city.removeClass("error");
      $('#city-err').css({ "display":"none" });
    }
    // Checking whether the response contains a np_branch error
    if (typeof(data['np_branch']) != "undefined" && data['np_branch'] !== null) {
      np_branch.addClass("error");
      $('#branch-err').css({ "display":"block" });
    } else if (np_branch.hasClass('error')) {
      np_branch.removeClass("error");
      $('#branch-err').css({ "display":"none" });
    }
  }
});

有没有更好的方法来做到这一点？

Answer 1

也许你可以检查一下（除非我误解了逻辑）：

// If data.last_name is defined and has some value show error message, else remove it
if(data['last_name']) {
 l_name.addClass("error");
 $('#l_name-err').show();
} else {
  l_name.removeClass("error");
  $('#l_name-err').hide();
}

此外，typeof 不应按照删除“()”的方式编写。 它应该是： typeof data['np_branch'] !== "undefined"而不是typeof(data['np_branch']) != "undefined"