当引入另一个 ajax 函数时，Ajax 代码不再运行答案

【问题标题】：Ajax code no longer running when another ajax function introduced当引入另一个 ajax 函数时，Ajax 代码不再运行
【发布时间】：2020-08-01 01:01:43
【问题描述】：

我正在尝试运行以下代码。当我运行代码时，我有 2 个验证函数在工作。当我在没有 validateUsername() 函数的情况下运行它时，它工作得非常好。但是，当我在代码中包含整个函数并包含 if 语句时，文件不再运行，它只是忽略了所有 ajax 调用。

$(document).ready(function() {

    $("#register-btn").on("click", function(e){
        console.log('Reg Starts!');
        e.preventDefault();
        if(validatePassword()){
            console.log('Password Validated!');
            if(validateUsername()) {
                console.log('Username Validated!');
                let data = $('#reg-form').serialize();
                let url = $('#reg-form').attr("action");
                
                $.post(url, data, (result) => {
                    $("#reg-username").val();
                    $("#reg-pw").val();
                    $("#reg-pw-cfm").val();

                    sessionStorage.setItem("restaurantID", 1);
                    sessionStorage.setItem("userID", 1);
                },'json'
                );
            }
        }
        $("#reg-username").val("");
        $("#reg-pw").val("");
        $("#reg-pw-cfm").val("");
    });
});

function validatePassword(){
    if($("#reg-pw").val().match(/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,20}$/)) {
        if($("#reg-pw").val() == ""){
            alert("Please enter password!!");
            return false;
        }
        if($("#reg-pw").val() != $("#reg-pw-cfm").val()) {
            alert("Passwords don't match!!");
            return false;
        } else {
            return true;
        }
    } else {
        alert("Please make sure password is between 6 to 20 characters and includes 1 numeric digit and a special character (!@#$%^&*)")
    }
}

function validateUsername() {
    $.ajax({
        url: 'validate_username',
        data: {
          'username':  $("#reg-username").val();
        },
        dataType: 'json',
        success: function (data) {
            if (data.is_taken) {
                alert("A user with this username already exists!");
                return false;
            }
            return true;
        }
    });   
}

【问题讨论】：

标签： javascript ajax function

【解决方案1】：

$.ajax 异步运行，if(validateUsername()) 一直是 false，所以你需要使用 promise 而不是回调。

关于 javascript 中的 Promise 的更多信息 developer.mozilla.org

如何解决：

重写你的验证函数

function validateUsername() {
    return $.ajax({
       url: 'validate_username',
       data: {
          'username':  $("#reg-username").val();
       },
       dataType: 'json'
    });
}

在你的主要功能中

validateUsername().then(function(data){
  if (data.is_taken) {
       alert("A user with this username already exists!");
       return;
  }
  console.log('Username Validated!');
  let data = $('#reg-form').serialize();
  let url = $('#reg-form').attr("action");
  /*...next code*/
})

【讨论】：