jQuery Ajax 성공 콜백 함수 정의


90

jQuery ajax를 사용하여 서버에서 데이터를 검색하고 싶습니다.

.ajax()다음과 같이 성공 콜백 함수 정의를 블록 외부에두고 싶습니다. 그렇다면 dataFromServer성공 콜백에서 반환 된 데이터를 사용할 수 있도록 다음과 같은 변수를 선언해야 합니까?

대부분의 사람들이 .ajax()블록 내에서 성공 콜백을 정의하는 것을 보았습니다 . 외부에서 성공 콜백을 정의하려는 경우 다음 코드가 정확합니까?

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

답변:


93

다음을 사용하십시오.

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

success속성에는 함수에 대한 참조 만 필요하며 데이터를이 함수에 매개 변수로 전달합니다.

handleData방법 handleData이 선언 되었기 때문에 이와 같이 함수에 액세스 할 수 있습니다 . JavaScript는 코드를 실행하기 전에 함수 선언을 구문 분석하므로 실제 선언 이전의 코드에서 함수를 사용할 수 있습니다. 이것을 호이 스팅이라고 합니다.

하지만 다음과 같이 선언 된 함수에는 포함되지 않습니다.

var myfunction = function(){}

통역사가 통과 한 경우에만 사용할 수 있습니다.

함수를 선언하는 두 가지 방법에 대한 자세한 내용은이 질문을 참조하십시오.


1
@Alnitak, 언제 deferred objects도입 되었습니까? 전에 본 적이 없습니다. 또한 사용할 콜백을 정의하는 코드가 실제 AJAX 호출과 다른 위치에 있기 때문에 약간 지저분 해 보입니다.
Cerbrus 2013

4
그것은 jQuery를 1.5에서 도입 그건되었다 훨씬 사용하는 것보다 덜 지저분한 success:. AJAX에서 콜백을 분리하는 것은 좋은 일입니다! 내 답변 끝에 방금 추가 한 메모를 참조하십시오.
Alnitak 2013

@Alnitak, 내가 볼게요. 내가 확신 할 수 있는지 보자 : P
Cerbrus

@Alnitak : 지연된 객체는 항상 성공 콜백보다 선호됩니까? 감사.
tonga

@tonga IMHO, 예, 매우 선호됩니다. $.get()예를 들어 코드에서 사용 했다면 error:처리기를 $.get지원하지 않기 때문에 처리기 를 추가 할 수 없었을 것입니다. 그러나 지연된 결과 에 를 추가 할 있습니다 . .fail$.get
Alnitak 2013

199

jQuery 1.5 (2011 년 1 월) 이후이 작업을 수행하는 "새로운"방법은 success콜백 을 전달하는 대신 지연된 객체를 사용하는 것입니다 . 당신은해야 반환 의 결과를 $.ajax다음을 사용 .done, .fail콜백을 추가하는 등의 방법으로 의 외부 $.ajax전화 .

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

이렇게 하면 AJAX 처리에서 콜백 처리가 분리 되고 원래 getData()함수 를 수정할 필요없이 여러 콜백, 실패 콜백 등을 추가 할 수 있습니다 . AJAX 기능을 나중에 완료 할 작업 집합에서 분리하는 것은 좋은 일입니다! .

지연은 또한 여러 비동기 이벤트를 훨씬 쉽게 동기화 할 수 있도록합니다. success:

예를 들어 여러 콜백, 오류 처리기를 추가하고 계속하기 전에 타이머가 경과 할 때까지 기다릴 수 있습니다.

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

jQuery의 다른 부분도 지연된 객체를 사용합니다. jQuery 애니메이션을 다른 비동기 작업과 매우 쉽게 동기화 할 수 있습니다.


1
@Cerbrus 새로운 예제를 참조하고 당신이 그것을 할 줄 방법을 생각 하지 않고 연기 객체
알니 타크

@jbl 지연된 객체는 환상적입니다. 나는 연기가 훨씬 더 잘 작동하기 때문에 일반적으로 사용을 장려하는 답변을 반대 투표합니다 success:.
Alnitak 2013

@Cerbrus 그것이 정확히 해석되어야하는 방식입니다. 당신이 검색 제안 user:6782 deferred에 대한 많은 더 많은 예제.
Alnitak 2013

양식 제출 이벤트와 함께 이것을 어떻게 활용할 수 있습니까?
haakym

즉, alert나는 개인적으로 사용하는 거라고하지만 ... console.log(data)아니면 배열 인 경우 : console.table(data):)
Armstrongest

16

스크립트 외부에서 매개 변수를 정의하는 이유를 모르겠습니다. 그것은 불필요합니다. 콜백 함수는 반환 데이터를 매개 변수로 자동으로 호출됩니다. sucess:IE 외부에서 콜백을 정의하는 것이 매우 가능합니다.

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

handleData 함수가 호출되고 매개 변수가 ajax 함수에 의해 전달됩니다.


6

성공 핸들러를 다음과 같이 다시 작성하십시오.

success : handleData

ajax 메소드의 success 속성에는 함수에 대한 참조 만 필요합니다.

handleData 함수에서 최대 3 개의 매개 변수를 사용할 수 있습니다.

object data
string textStatus
jqXHR jqXHR

5

나는 쓸 것이다 :

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

15
코드는 실제로 사용하지 dataFromServer않으므로 첫 번째 줄을 제거 할 수 있습니다.
Anthony Grist 2013

2

변수를 선언 할 필요가 없습니다. Ajax 성공 함수는 자동으로 최대 3 개의 매개 변수를 사용합니다.Function( Object data, String textStatus, jqXHR jqXHR )


어떻게 든 이러한 기본 매개 변수를 찾기 위해 잠시 기다려야했습니다. 감사!
payne

2

몇 시간 후에 그것을 가지고 놀다 거의 둔해집니다. 기적이 나에게 왔어요.

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>

1
성공을 위해 다른 함수 호출을 넣을 필요가 없습니다. success : callbackjquery가 매개 변수를 callback사용하여 호출 된 함수를 트리거 한다고 직접 말할 수 있습니다 data.
Olgun Kaya

-1

구성 요소 즉 각도 JS 코드에서 :

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.