아약스 호출 대기 없음

Question

사용자가 "제출"을 클릭하면 먼저 선택한 사용자 이름이 이미 사용되었는지 확인하고 싶습니다. 나는 이것에 대한 아약스를 사용

function submit() { 
    if (userNameTaken()) { 
     alert("Please choose a username that is not already in use."); 
     return false; 
    } 
} 

function userNameTaken() { 
    var taken = false; 
    var username = $("#username").val(); 
    $.get("username_used.cgi", { "username": username }, function(data) { 
     taken = data > 0; 
    }); 
    return taken; 
} 

그래서 나는 이름을 촬영할 때, 기능 userNameTaken()가 true를 돌려 않는다는 것을 알고있다.

그러나 양식은 마치 자바 스크립트가 일시 중지하지 않고이 아약스 호출이 끝나기를 기다리지 않고 마치 계속 진행되고 계속 평가됩니다. 내 양식이 아약스 전화를 기다리고 제출하지 않도록이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

Answer 1

정상적인 하향식 프로세스에서는 Ajax가 실행되지 않으므로 체크하십시오. 제출하면 아약스 응답을 기다리지 않습니다. 수동으로 양식을 제출할 수 있도록 normal button 대신 submit button을 사용할 수 있습니다. 다른 촬영하지 usename이 경고를 보여 주면

<form ... > 
// other parts 

<input type="button" value="sumbit" onclick="userNameTaken();"/> 
</form> 

변화

function userNameTaken() { 
    var username = $("#username").val(); 
    $.get("username_used.cgi", { "username": username }, function(data) { 
     if(data > 0){ 
      alert("Please choose a username that is not already in use."); 
     }else{ 
      // validation goes here 
      $('form').submit(); 
     } 
    }); 
} 

같은 코드는 그래서 아약스 응답을 확인하고보다 양식을 제출합니다. 당신은 어떤 id를 버튼에 넣고 jquery를 사용하여 쉽게 처리 할 수 ​​있습니다.

Answer 2

다음과 같이 Ajax 호출에서 데이터를 반환 할 수 없습니다. Ajax 호출은 임의의 미래의 시간에 반환되지만 userNameTaken()에 대한 호출은 Ajax 요청이 완료되기 전에 즉시 반환됩니다.

브라우저 UI를 정지 할 위험이 있으므로 호출을 동기식으로 설정할 수 있습니다. IMO 선호하지 않습니다. 나는 ...에 "확인"플래그를 설정하거나 제출 버튼을 활성화하거나 경고를 팝업, 또는 할

FWIW을 콜백 함수를 사용

또는 이름 만 사용하지 않는 경우 제출을 허용 팝업 알림 찾기 매우은 원활한 UX에 방해가되지 않습니다.

Answer 3

Ajax 호출의 "async"설정을 "false"로 설정해야합니다. 이렇게하면 호출이 반환 될 때까지 함수가 차단됩니다.

다음은 JQuery 문서에 대한 링크입니다. "async"설정을 확인하십시오 :http://api.jquery.com/jQuery.ajax/