jQuery ajax 호출을 사용하는 함수에서 값을 반환하려면 어떻게해야합니까?

Question

사용자 이름이 이미 존재하면 true를 반환하고 그렇지 않으면 false를 반환하는 Asp.Net WebMethod를 호출하는 다음 Javascript 함수가 있습니다. 다음은 경고 상자에서 정답을 줄 것입니다. 그러나 경고 (result.d)가 result.d를 반환하도록 변경하면 함수의 결과는 항상 정의되지 않습니다. WebMethod의 응답을 기반으로 값을 반환하기 위해 Ajax 호출이 포함 된 함수를 얻으려면 어떻게해야합니까?

function doesEnteredUserExist() { 
     var valFromUsernameBox = $("#txtUserName").val(); 
     var jsonObj = '{username: "' + valFromUsernameBox + '"}'; 

     $.ajax({ 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: jsonObj, 
     dataType: 'json', 
     async: false, 
     url: 'AddNewUser.aspx/IsUserNameValid', 
     success: function (result) { 
      alert(result.d); 
     }, 
     error: function (err) { 
      alert(err); 
     } 
    }); 
} 

Answer 1

주목할 점은 ajax 기능이 비 차단이라는 것입니다. 두 개의 콜백 함수를 지정합니다 (하나는 success이고 다른 하나는 error).이 함수 중 하나는 기본 요청이 완료 될 때 실행됩니다.

doesEnteredUserExist은 ajax 호출이 완료 될 때까지 대기하지 않으므로 함수의 반환 값은 undefined입니다.

호출 결과에 따라 실행을 계속하는 올바른 방법은 기능을 분리 된 함수로 분리하여 success 함수에서 호출하는 것입니다.

Answer 2

Ajax는 비동기 적이므로 "doesEnteredUserExist"함수가 반환되면 ajax 호출이 아직 완료되지 않습니다. 그런 다음 성공 콜백에서 나중에 가치가 있습니다. 거기에서 코드를 계속 진행하고 정보를 사용자에게 표시해야합니다.

Answer 3

변수에 result.d의 값을 저장 한 다음 원하는 값으로 사용하십시오.

변경이이에

success: function (result) { 
     alert(result.d); 
    }, 

: 당신이 result.d 필요할 때마다

success: function (result) { 
     var resultString = result.d; 
    }, 

지금 바로 변수 resultString를 사용합니다. 기본적으로 ajax 호출은 값을 반환하려는 함수를 호출 할 수있는 유일한 함수이므로 함수가 호출 될 때 해당 값을 저장해야합니다.

Answer 4

어쩌면이 bash를 function onSucess (data) { alert (data.d); } 당신의 success 콜백 함수 내부

function doesEnteredUserExist() { 
    var valFromUsernameBox = $("#txtUserName").val(); 
    var jsonObj = '{username: "' + valFromUsernameBox + '"}'; 

    $.ajax({ 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    data: jsonObj, 
    dataType: 'json', 
    async: false, 
    url: 'AddNewUser.aspx/IsUserNameValid', 
    success: onSucess, 
    error: function (err) { 
     alert(err); 
    } 
}); 
} 

Answer 5

는 부모 함수의 당신 return 어떤 가치가 return 값을 설정하지 않는 경우. 이 경우 부모 함수는 $.ajax이고 항상 jqXHR 지연 객체를 반환합니다.

jQuery 1.5 이상을 사용하는 경우 지연을 사용할 수 있습니다.$.when()에 대한

var jqXHR = $.ajax({...}); 

$.when(jqXHR).then(function (result) { 
    return result.d 
}); 

문서 : http://api.jquery.com/deferred.when

이 일의 예는를 반환하는 것입니다 생각은 객체가 AJAX 요청에서 반환 된 jqXHR을 저장하고 그것이 값의 반환하기 전에 완료 될 때까지 기다리는 것입니다

function doesEnteredUserExist() { 
    return $.ajax({...}); 
} 
$.when(doesEnteredUserExist).then(function (result) { 
    //you can access result.d here 
}); 

Answer 6

난 당신이 왜 경고입니다 전화에서 범위를 벗어 result.d을 설정하려고하는 추측하고있다 : jqXHR의 함수에서 객체 다음 AJAX 요청을 기다리는 함수 밖에서 해결하기 위해 (아르 자형 esult.d)는 범위 내에서 작동합니다.

막대의 끝이 잘못되었을 수 있습니다. 전역 변수 (권장하지 않음)를 사용할 수 있으며, 함수에서 읽을 수있는 ajax 반환 값으로 설정할 수 있습니다.

내가 몇 가지 방법으로 질문을 읽으면서 달성하려는 목표에 대해 더 많은 정보 또는 명확성이 필요할 수 있습니다.

난이 정상적으로 (havent 한이 시험)을 수행

function ajaxLoad(callback) 
$.ajax({ 
     type: 'POST', 
     async: true, 
     url: 'url.aspx', 
     data: d, 
     cache: false, 
     contentType: 'application/json', 
     dataType: 'json', 
     error: function (xmlHttpRequest, textStatus, errorThrown) { 
    //error stuff 
     }, 
     success: function (data) { 
      if (typeof callback == 'function') { [callback(data)]; } 
     } 
    }); 

} 

function callback(data) 
{ 
    alert(data); 
} 

ajaxLoad 호 ('콜백')를 사용하여 기능;

그런 식으로!

Answer 7

이

1. 새로운 이연 객체를 생성 (정말로, 나는 약속, :) 코드에 단계를 참조) $.Deferred 오브젝트 사용의 좋은 예는

   아이디어는 매우 간단 보인다

2. 아약스 전화를 걸자. 결과가 false 인 경우에는 그렇지 않으면 당신이 (당신이 error 아약스 콜백에 또한 그것을 거부 할 수있다)
3. 반환 약속의 상태를 확인하기 위해 약속
4. 사용 .when() 도우미를 해결할 연기 거부합니다.

나는 응답에 randomically true 또는 false를 반환 바이올린을 만들

function checkUserExist() { 
    var dfd = $.Deferred(); /* step 1 */ 

    $.ajax({ 
     url: "/echo/json/", 
     data: { 
      "json": JSON.stringify({d: (Math.random() < 0.5) }) 
     }, 
     type: "POST", 
     success: function (data) { 
      console.log("result (inside ajax callback) ", data.d); 
      if (!data.d) { dfd.reject() } else { dfd.resolve(); } /* step 2 */ 
     }, 
     error : ... 
    }); 

    /* step 3 */   
    return dfd.promise(); 

} 

$.when(checkUserExist()) /* step 4 */ 
    .fail(function() { console.log("user don't exist (inside fail)"); }) 
    .done(function() { console.log("user already exist (inside done)"); }) 

바이올린 URL : http://jsfiddle.net/Gh9cN/

(참고 :이 작업 할 수 있도록, 그래서 나는 일부 내부 세부 사항을 변경했습니다 jsfiddle)

Answer 8

@timing이 언급했듯이 함수가 반환 할 때까지는 정의되지 않은 값을 얻을 때마다 ajax 호출이 완료되지 않습니다.

이것은 문제의 해결책은 아니지만, 값을 반환하는 대신 대체 방법으로 div와 같은 일부 요소의 innerHTML을 반환 할 수 있습니다. 아래는 내 뜻입니다. :

function doesEnteredUserExist() { 
    var valFromUsernameBox = $("#txtUserName").val(); 
    var jsonObj = '{username: "' + valFromUsernameBox + '"}'; 

    $.ajax({ 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    data: jsonObj, 
    dataType: 'json', 
    async: false, 
    url: 'AddNewUser.aspx/IsUserNameValid', 
    success: function (result) { 
     //alert(result.d); 
     if(result.d==true){ //Just a check for the value whether true or 1 etc.. 
     $("#notifications").html('Username Already Exists'); // Have a div where you can display the message (named it notifications here) , update the notifications div text to notify the user 
     }else{ 
      $("#notifications").html('Username is Available'); 
     } 
    }, 
    error: function (err) { 
     alert(err); 
    } 
}); 
}