JavaScript 및 Ajax는 alert ()를 사용할 때만 작동합니다.
https://stackoverflow.com/questions/1267454
-
13-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
내 JavaScript에 문제가 있습니다. 이상하게 행동하는 것 같습니다. 이것이 일어나고있는 일입니다. 사용자가 제출 한 후에는 형식이 있으며, 제출 된 데이터를 확인하기 위해 함수 (onsubmit 이벤트)를 호출합니다. 저장된 데이터를 확인하거나 잘못된 것이 있거나 사용자 이름/이메일이 이미 데이터베이스에있는 경우 (이 부품에 AJAX를 사용) False를 반환합니다. DOM을 사용하여 오류를 표시합니다. 다음은 아래 코드입니다. 이상한 점은 빈 경고 ( '') 메시지를 사용할 때만 작동한다는 것입니다. 도와 주셔서 감사합니다.
//////////////////////////////////////
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) 요청이 반환 될 때까지 스크립트 (및 전체 웹 페이지)의 추가 처리가 중지됩니다. 요청이 완료 될 때까지 웹 브라우저를 효과적으로 정지시키기 때문에 이것은 나쁩니다.
적절한 수정은 AJAX 요청 결과에 따라 다루어지는 모든 처리가 진행되도록 코드를 재구성하는 것입니다. onreadystatechange 기능을하고 AJAX 요청을 시작하는 주요 기능에있을 수 없습니다.
일반적으로 처리되는 방식은 DOM (AJAX 요청이 전송되기 전)을 수정하여 양식을 준비하고 "처리"메시지를 표시 한 다음 Ajax 응답 처리기에 모든 것이 괜찮은 경우 (서버가 올바르게 응답 한 경우 그리고 유효성 검사가 성공적이었습니다) 전화 submit() 양식에서, 그렇지 않으면 양식을 다시 편성하게 만들고 유효성 검사 오류를 표시하십시오.
다른 팁
문제는 xmlhttprequest가 비동기식이라는 것입니다. 백그라운드에서 요청을 보내고 끝날 때까지 기다리지 않습니다.
그만큼 alert 명령문은 사용자가 확인을 클릭 할 때까지 코드가 대기하고 요청이 완료됩니다.
당신은 그것을 사용해야합니다 onreadystatechange 다음과 같은 이벤트 :
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4) {
// Do things
}
};
응답이 접수 된 후이 속성에 할당 된 방법이 호출됩니다. (그리고 다른 시간에 당신은 그것을 확인해야합니다. readyState IS 4)
요청을 보내고 있습니다 비동기 적으로, 이것 때문에:
xmlhttp.open(..., true);
통과 true 세 번째 논쟁으로 open() 결과가 다시 오기 전에 코드가 계속 실행됩니다.
그만큼 alert() 후속 코드가 실행되기 전에 해당 비동기 요청 시간을 완료 할 수 있습니다.
일반적으로 ajax 호출 결과에 따라 달라지는 모든 코드를 다음 내에서 콜백으로 이동하는 것이 좋습니다.
if(xmlhttp.readyState == 4)
블록이지만 귀하의 경우 유효성 검사 기능에서 무엇을 반환 해야하는지 알기 위해 호출 결과가 필요합니다. 이 경우 통과하여 동기 호출을 사용해야합니다. false 에게 open(). 그런 다음 응답이 돌아올 때까지 후속 코드가 실행되지 않습니다.
이 사람들은 옳지 만 양식이 유효하지 않은 경우 양식의 제출이 취소되도록 검증 방법에서 BOOL을 반환해야합니다.
라인을 따라 무언가 :
<form onsubmit="return IsValid();">
...
</form>
당신은 또한 항상 거짓을 반환 할 수 있습니다 validateregform 그리고 xmlhttp.onreadystatechange = function () 유효한 경우 양식을 제출하거나 오류 메시지를 표시하십시오.
Ajax 호출이 비동기식이기 때문입니다. 다음 코드 xmlhttp.send() 즉시 실행됩니다. Ajax 호출이 종료 될 때까지 기다리지 않습니다 (경고를하지 않는 한).
AJAX 호출 후 콜백 메소드로 실행될 모든 코드를 콜백 메소드로 이동하여 통화가 완료된 후 실행되도록하십시오.
편집하다]: 문제 외에도 Ajax를 사용하여 양식을 검증 한 다음 사용자가 일반적인 방법을 제출할 수 있도록 허용하는 것이 나에게는 조금 이상해 보입니다.
검증을 두 부분으로 나눌 수 있습니까? 하나는 클라이언트 측에서 순전히 수행 할 수 있고 다른 하나는 서버 측 유효성 검사를 포함하는 것입니다. 제출시 서버 측에서 두 번째 부분을 완전히 수행하고 오류를 클라이언트로 되돌릴 수 있습니다.
세 번째 매개 변수를 xmlhttp.open ()로 전달해야합니다.
예를 들어 유형 = "제출"을 사용할 때 같은 문제가있었습니다.
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login" onclick="submitForm()">
<span class="glyphicon glyphicon-log-in"></span> Sign In
그러나 나는 그것을 type = "button"으로 변경하고 작동합니다.
나도 같은 문제가있었습니다. 일단 제거하면 alert("") 작동하지 않습니다. 나는 그것을 알아 냈고 그것이 그 거래입니다.
HTML에서 사용하면 <button></button> alert("") 페이지가 다시로드되는 것을 방지하기 위해 코드 직후.
간단히 사용할 수 있습니다 <input type="button" value="something"> 대신에 <button></button> 브라우저가 페이지를 다시로드하지 못하도록합니다.
나는 같은 문제가 있었고 간단히 추가했습니다.
<?php
usleep(200000)// 2 seconds
?>
JavaScript (BTW, jQuery 1.9.1을 머리에 연기하는 것을 수반 한 후
