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>