Javascript和AJAX,仅在使用alert()时有效

我的JavaScript出现问题。这似乎很奇怪。这是怎么回事。我有一个表单,在用户提交表单后,它将调用一个函数(onsubmit事件)以验证提交的数据,如果出现问题,或者如果用户名/电子邮件已经存在于数据库中(此部分使用ajax),它将返回false并使用DOM显示错误。这是下面的代码。奇怪的是,它仅在我使用空的alert(’‘)消息时才起作用,没有它,它将不起作用。谢谢您的帮助。

//////////////////////////////////////

function httpRequest() {

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else if (window.ActiveXObject) {

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

} else {

alert("Your browser does not support XMLHTTP!");

}

return xmlhttp;

}

function validateRegForm(reg) {

var isValidForm = true;

var warningIcon = "";//for later in case we want to use an icon next to warning msg

with(reg) {

var regFormDiv = document.getElementById("registration_form");

//Check if dynamic div exist, if so, remove it

if(document.getElementById('disp_errors') != null) {

var dispErrorsDiv = document.getElementById('disp_errors');

document.getElementById('reg_form').removeChild(dispErrorsDiv);

}

//Dynamically create new 'div'

var errorDiv = document.createElement('div');

errorDiv.setAttribute('id','disp_errors');

errorDiv.setAttribute('style','background-color:pink;border:1px solid red;color:red;padding:10px;');

document.getElementById('reg_form').insertBefore(errorDiv,regFormDiv);

var xmlhttp = httpRequest();

var available = new Array();

xmlhttp.onreadystatechange = function() {

if(xmlhttp.readyState == 4)

{

var response = xmlhttp.responseText;

if(response != "") {

//Return values

var newValue = response.split("|");

available[0] = newValue[0];

available[1] = newValue[1];

}

}

}

xmlhttp.open("GET","profile_fetch_reg_info.php?do=available&un="+u_username.value+"&email="+u_email.value+"",true);

xmlhttp.send(null);

alert(' '); ////////////WITHOUT THIS, IT DOESN'T WORK. Why?

if(available[1] == "taken") {

errorDiv.innerHTML += warningIcon+'Username is already taken!<br />';

isValidForm = false;

} else if(u_username.value.length < 4){

errorDiv.innerHTML += warningIcon+'Username must be more than 4 characters long!<br />';

isValidForm = false;

} else if(u_username.value.length > 35) {

errorDiv.innerHTML += warningIcon+'Username must be less than 34 characters long!<br />';

isValidForm = false;

}

if(available[0] == "taken") {

errorDiv.innerHTML += warningIcon+'Email address entered is already in use!<br />';

isValidForm = false;

} else if(u_email.value == ""){

errorDiv.innerHTML += warningIcon+'Email address is required!<br />';

isValidForm = false;

} else {

//Determine if email entered is valid

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (!filter.test(u_email.value)) {

errorDiv.innerHTML += warningIcon+'Email entered is invalid!<br />';

u_email.value = "";

isValidForm = false;

}

}

if(u_fname.value == ""){

errorDiv.innerHTML = warningIcon+'Your first name is required!<br />';

isValidForm = false;

}

if(u_lname.value == ""){

errorDiv.innerHTML += warningIcon+'Your last name is required!<br />';

isValidForm = false;

}

if(u_password.value.length < 4){

errorDiv.innerHTML += warningIcon+'Password must be more than 4 characters long!<br />';

isValidForm = false;

} else if(u_password.value.length > 35) {

errorDiv.innerHTML += warningIcon+'Password must be less than 34 characters long!<br />';

isValidForm = false;

} else if (u_password.value != u_password2.value) {

errorDiv.innerHTML += warningIcon+'Password and re-typed password don\'t match!<br />';

isValidForm = false;

}

if(u_squestion.value == ""){

errorDiv.innerHTML += warningIcon+'A security question is required!<br />';

isValidForm = false;

}

if(u_sanswer.value == ""){

errorDiv.innerHTML += warningIcon+'A security answer is required!<br />';

isValidForm = false;

}

if(u_address.value == ""){

errorDiv.innerHTML += warningIcon+'Address is required!<br />';

isValidForm = false;

}

if(u_city.value == ""){

errorDiv.innerHTML += warningIcon+'City is required!<br />';

isValidForm = false;

}

if(u_state.value == ""){

errorDiv.innerHTML += warningIcon+'State is required!<br />';

isValidForm = false;

}

if(u_zip.value == ""){

errorDiv.innerHTML += warningIcon+'Zip code is required!<br />';

isValidForm = false;

}

if(u_phone.value == ""){

errorDiv.innerHTML += warningIcon+'Phone number is required!<br />';

isValidForm = false;

}

if(isValidForm == false)

window.scroll(0,0);

return isValidForm;

}

}

回答:

这有alert()帮助,因为这会延迟该函数中其余javascript的处理(从alert()下到下的所有操作),从而为AJAX请求留下足够的时间来完成。AJAX中的第一个字母代表“异步”,这意味着(默认情况下)响应将在“将来的某个时候”出现,但不是立即出现。

一个补丁修复(你应该

执行)是使处理同步(通过改变第三个参数open()false),将停止脚本(以及整个网页)的进一步处理,直至请求返回。这很不好,因为它将有效地冻结Web浏览器,直到请求完成。

正确的解决方法是重新组织代码,以便依赖AJAX请求结果的所有处理都可以进入该onreadystatechange函数,并且不能在启动AJAX请求的主函数中进行。

通常处理此方法的方法是修改您的DOM(在发送AJAX请求之前)以使表单变为只读状态并显示某种“处理中”消息,然后,如果一切正常,则在AJAX响应处理程序中(服务器正确响应)

并且 验证成功)submit()在表格上调用,否则使表格再次变为可写状态并显示任何验证错误。

以上是 Javascript和AJAX,仅在使用alert()时有效 的全部内容, 来源链接: utcz.com/qa/399694.html

回到顶部