[javascript] jQuery Ajax 성공 콜백 함수 정의

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
}



답변

다음을 사용하십시오.

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

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

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

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

var myfunction = function(){}

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

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


답변

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 애니메이션을 다른 비동기 작업과 매우 쉽게 동기화 할 수 있습니다.


답변

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

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

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

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


답변

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

success : handleData

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

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

object data
string textStatus
jqXHR jqXHR


답변

나는 쓸 것이다 :

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


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


답변

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


답변

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

<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>