不能在 if 和 else 中使用 preventDefault()答案

【问题标题】：Can't use preventDefault() with if, else不能在 if 和 else 中使用 preventDefault()
【发布时间】：2021-04-21 12:04:43
【问题描述】：

以下代码中的$.get 返回一个名为data 的JSON 格式的布尔值。但是无论data 的值是false 还是true preventDefault() 都会阻止表单的提交。

$(document).ready(function() {
  $("#username").blur(function() {
    let username = document.getElementById("username").value;
    
    $.get("/check", {
      username_value: username
    }, function(data) {
      alert(data);
      
      $("#submit").click(function(e) {
        if (data) {
          e.preventDefault();
        } else if (!data) {
          e.submit();
        }
      });
    });
  });
});

这是 /check 部分

@app.route("/check", methods=["GET"])
def check():
    """Return true if username available, else false, in JSON format"""
    get_username = request.args.get("username_value")

    users = db.execute("SELECT username FROM users")

    lenght = len(get_username)
    i = 0
    for user in users:
        if get_username == users[i]["username"] or not lenght > 1:
            return jsonify(True)
        i += 1

    return jsonify(False)

顺便说一句，我是编码业务的新手。感谢您的帮助。

【问题讨论】：

alert(data) 看起来像什么？我打赌它是字符串或其他东西而不是布尔值
data 将是一个字符串，因此除非它为空，否则它将始终强制为真值，但是您将返回'true' 或'false'，因此情况并非如此。我强烈建议您返回结构化数据格式，例如 JSON，以避免此问题并使用布尔值作为值。另外e.submit() 将导致错误，因为该事件没有submit 方法。 else 可以完全删除。
我认为数据部分正在工作，因为当我将 e.preventDefault(); 和 e.submit(); 更改为 alert(data); 时，它会显示我想看到的消息：真或假
对，但它们将是字符串，而不是布尔值，并且类型强制将意味着 'true' 和 'false' = true。这就是为什么使用alert() 进行调试不是好的做法。请改用 console.log()，并使用结构化类型的布尔值作为 AJAX 调用的响应。
原来data 一直是一个布尔值。刚刚用 typeof 检查它并返回布尔值作为结果。还有其他想法吗？感谢您的建议顺便说一句:)

标签： javascript jquery preventdefault

【解决方案1】：

尝试更改以通过这种方式从表单 ID 而不是按钮捕获事件：

$("#form").submit(function (e) {
  if (!data) {
    e.preventDefault();    
  } else {
    e.submit();
  }
});

e.submit() 必须用于来自已提交表单的事件。

确保数据是布尔类型。并且不要忘记将选择器更改为您的表单 ID。

【讨论】：

我很确定 data 是布尔值，因为我用 typeof 检查了它，多亏了你，我将事件从表单 ID 更改为表单标签的 id，但这也没有用。谢谢你的建议。

【解决方案2】：

我通过将$.get 替换为$.ajax 来解决问题。我想问题在于$.get 只能异步工作。所以我使用$.ajax 的异步参数为false。然后它就像我想要的那样工作。

最新版本的代码：

$(document).ready(function() {
          $('#form').submit(function(e){
              let username = document.getElementById("username").value;
              let password = document.getElementById("password").value;
              let confirmation = document.getElementById("confirmation").value;
              var boolean_data;
              $.ajax({url: "/check?username=" + username, type: 'get', async: false, success: function(data){boolean_data=data;}});

              if(!boolean_data) {
                alert("\"" + username + "\"" + " username is already taken.");
                e.preventDefault();
              }
              else if(!password || !confirmation) {
                  alert("Pls povide a password and confrim it");
                  e.preventDefault();
              }
              else if(password != confirmation) {
                  alert("Passwords don't match");
                  e.preventDefault();
              }

          });
      });

感谢所有评论并回答我问题的人。

【讨论】：

在获取请求上设置 async:false 将锁定浏览器，直到请求完成。你可能不想这样做。