자바 스크립트에서 오류가 발생했습니다.

Question

chat.openChat()에 chat.getHtmlPage()에서 HTML 코드를 수신하고 싶지만 반환 작업은 "정의되지 않음"입니다.

var chat = { 
    openChat : function($url){ 
     $('#popup').html(chat.getHtmlPage($url)); // It's wrong, UNDEFINED. 
    }, 

    getHtmlPage : function($url){ 
     $.ajax({ 
      url: $url 
     }).done(function($html) { 
      return $html; // It's OK! $html is with correct html, see with alert(). 
     }); 
    } 
} 

$(document).ready(function(){ 
    $('.btnChat').click(function(){ 
     chat.openChat($(this).attr('href')); // It's OK! 
     ... 
     return false; 
    }); 
}); 

Answer 1

AJAX 요청이 비동기 (그리고 정말 아약스 후 모두가 아니다), 그래서 당신은 getHtmlPage 결과 얻을 후 종료됩니다. 동기식으로 변경하더라도 이 아닌 done 처리기에서 값을 반환하므로 openChat에 정의되지 않은 값이 남아 있습니다.

getHtmlPage 방법에 대한 콜백을 제공해야합니다. 예 : AJAX에

var chat = { 
    openChat : function($url){ 
     chat.getHtmlPage($url, function(html) { 
      $('#popup').html(html); 
     }); 
    }, 
    getHtmlPage : function($url, callback){ 
     $.ajax({ 
      url: $url 
     }).done(callback); 
    } 
} 

Answer 2

그것은 다음과 같이해야합니다 :

var chat = { 
    openChat : function($url){ 
     chat.getHtmlPage($url); 
    }, 

    getHtmlPage : function($url){ 
     $.ajax({ 
      url: $url 
     }).done(function($html) { 
      $('#popup').html($html); 
     }); 
    } 
} 

$(document).ready(function(){ 
    $('.btnChat').click(function(){ 
     chat.openChat($(this).attr('href')); // It's OK! 
     ... 
     return false; 
    }); 
}); 

AJAX는 asynchronouse입니다. 일단 호출하면 스크립트 실행이 다음 줄로 이동하고 요청이 완료되면 나중에 .done이 호출됩니다. 또한 done에서 돌아 오면 아무것도 수행하지 않습니다. jquery ajax 이벤트가 요청 된 후에 트리거됩니다. 그리고 당신이 synchronouse 방식으로 작동하게하더라도 jquery는 코드의 상위 레벨로 반환 된 값을 전달하지 않을 것입니다.

Answer 3

Ajax 호출은 비동기 적으로 호출되므로 바로 ajax 함수를 사용할 수 없습니다. 결과를 $ ('popup')에 저장합니다.

당신은 이런 식으로 뭔가를해야 할 것 :

openChat : function($url){ 

    chat.getHtmlPage($url)); 
}, 

setHtmlPage : function ($html) { 
    $('popup').html($html); 
}, 


getHtmlPage : function($url){ 

    $.ajax({ 
     url: $url 
    }).done(function($html) { 
     chat.setHtmlPage($html); 
    }); 
} 

는 또한 아약스에 대한 JQuery와 문서에 대한보고를 할 수 있습니다. 동 기적으로 아약스 요청을하는 방법이 있지만 브라우저가 차단되며 최신 버전에서는 더 이상 사용되지 않습니다. 기본적으로

Check the part about async

Answer 4

첫 번째 'A'는이 의미, '비동기'이다 : 시간으로되는 .done() 호출되는, 코드의 나머지 부분은 이미 움직였다. 이 지식으로 인해 .done()의 return은 의미가 없습니다.
대신 .ajax-object에 async: false을 설정하면 AJAX의 비동기 동작을 비활성화합니다. 그러나 이것은 AJAX의 원래 목적이 아니며 일부 브라우저에서는 문제를 일으킬 수 있음을 알고 있어야합니다.

Oone 솔루션은 다음 getHtmlPage에 return 설정하는 것입니다 (false로 비동기 설정에 addtion에서를!) :

getHtmlPage : function($url){ 

    //a new variable to store the ajax-result 
    //defining it here, so it's only visible within the scope of getHtmlPage 
    var html; 

    $.ajax({ 
     url: $url, 
     async: false 
    }).done(function($html) { 
     //we use the html variable here to store the result 
     html = $html; 
    }); 

    //finally returning the variable 
    return html; 
} 

이 방법은 수익 문은 아약스 호출 할 때까지 실행되지 않습니다 끝내라.

Answer 5

솔루션

하나 개의 일반적인 기능 (원래의 아이디어를) 할 ​​수 있습니다.

var chat = { 

    openChat : function($url, $htmlElement){ 

     chat.setHtmlPage($url, $htmlElement); 
    }, 


    setHtmlPage : function($url, $htmlElement){ 

     $.ajax({ 
      url: $url 
     }).done(function($html) { 
      $($htmlElement).html($html); 
     }); 
    } 

} 

$(document).ready(function(){ 

    $('.btnChat').click(function(){ 

     chat.openChat($(this).attr('href'), '#popup'); 

     ... 

     return false; 
    }); 

});