javascript - 当引入另一个 ajax 函数时,Ajax 代码不再运行
问题描述
我正在尝试运行以下代码。当我运行代码时,我有 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;
}
});
}
解决方案
$.ajax 是异步运行的,并且 if(validateUsername())
一直是 false,所以你需要使用 promise 而不是回调。
javascript developer.mozilla.org中有关 Promises 的更多信息
怎么修:
重写你的验证功能
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*/
})
推荐阅读
- java - 无法解析“com.google.android.gms.location.places.Places”
- apache-spark - 在 Spark 中启用目录提交程序
- javascript - 为什么从未声明过的google变量存在?
- android - 显示文件的 ListFragment 问题
- ios - 如何使用默认查看按钮确定用户是否在锁定屏幕上查看通知
- java - 预期进一步的请求会留下 1 个未满足的期望。0 个请求已执行
- sql - 如何按当前日期获取财务季度日期
- php - 如何获得标记列表的第二个最大值?
- spring-mvc - 将对象从视图传递到控制器
- javascript - javascript异步任务处理