jQuery를 사용하여 함수에서 데이터를 retuck하십시오
-
08-07-2019 - |
문제
jQuery 코드가 포함 된 함수를 호출하려고합니다. 이 기능이 jQuery 문의 결과를 반환하기를 원합니다. 작동하지 않으며 이유를 알아 내려고 노력하고 있습니다.
function showGetResult (name) {
var scriptURL = "somefile.php?name=" + name;
return $.get(scriptURL, {}, function(data) { return data; });
}
alert (showGetResult("John"));
경고가 표시됩니다 "[object XMLHttpRequest]
"그러나 jQuery 문을 자체적으로 실행하면 함수 외부에서는 잘 작동합니다 ->. $.get(scriptURL, {}, function(data) { alert(data); })
이 코드를 반환하는 함수 안에 넣어 재사용 할 수 있습니다. $.get
데이터. 내가 여기서 어떤 근본적인 실수를 하는가?
해결책
몇 가지 실수가 있습니다. 먼저 $ .get은 콜백 함수의 리턴 값을 반환하지 않습니다. XHR 객체를 반환합니다. 둘째, get 함수는 동기식이 아니며 비동기식이므로 ShowgetResult가 완료되기 전에 돌아올 수 있습니다. 셋째, 콜백 내부에서 외부 범위로 무언가를 반환 할 수 없습니다. 그러나 외부 스코프의 변수를 바인딩하여 콜백에 설정할 수 있습니다.
원하는 기능을 얻으려면 $ .Ajax를 사용하고 Async 옵션을 False로 설정해야합니다. 그런 다음 외부 범위에서 변수를 정의하고 AJAX 콜백에 할당 하여이 변수를 함수에서 반환 할 수 있습니다.
function showGetResult( name )
{
var result = null;
var scriptUrl = "somefile.php?name=" + name;
$.ajax({
url: scriptUrl,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
그러나 당신은 아마도 비동기식에서 동기 호출로 변경하기보다는 콜백 함수 자체에서 원하는 것을 수행하는 방법을 알아내는 것이 좋습니다.
다른 팁
당신이하는 근본적인 실수는 Ajax 호출이 비동기식으로 이루어 지므로 돌아올 때까지 결과는 아직 준비되지 않았습니다. 이 작업을 수행하려면 다음과 같이 코드를 수정할 수 있습니다.
$(function() {
showGetResult('John');
});
function showGetResult (name) {
$.get('somefile.php', {
// Pass the name parameter in the data hash so that it gets properly
// url encoded instead of concatenating it to the url.
name: name
}, function(data) {
alert(data);
});
}
동기 요청을 원하는 것 같습니다.jQuery가 비동기식 Ajax 요청보다는 동기식을 수행하도록하려면 어떻게해야합니까?
또는 콜백을 기능으로 전달할 수 있습니다.
function showGetResult (name, callback) {
var scriptURL = "somefile.php?name=" + name;
return $.get(scriptURL, {}, callback);
}
showGetResult("John", function(data){ alert(data); });
근본적인 실수는 Ajax의 "비동기"부분입니다. 서버가 응답을 다시 보내는 데 걸리는 시간을 알지 못하기 때문에 Ajax 메소드는 "차단"하지 않습니다. 즉, 서버를 호출하지 않고 결과를 기다리는 데 앉아 있습니다. 대신, 당신은 다른 것을 계속하지만, 당신은 결과가 돌아 오면 발사 될 "콜백"이라는 메소드를 설정합니다. 이 방법은 데이터를 사용하여 수행해야 할 일을 수행 할 책임이 있습니다 (예 : 페이지에 주입).
이것은 잘못된 방법입니다. 함수 (data)는 언제든지 호출 기능이므로 $ .get을 반환합니다 실행됩니다 .. 호출 기능이 호출되지 않았을 가능성이 있습니다.
게시물 데이터를 함수 (데이터) 메소드에서 함수 가져 오기를 더 잘 호출합니다.
효율적인 방법은 서버에 동기화/비동기 요청을 모두 jQuery의 연기 된 방법을 사용하고 Deferred.Resolve ()를 기다린 다음 지연된 약속 객체를 반환하는 것입니다. 약간 지루해 보이지만 작은 연구는 큰 데이터에 도움이됩니다. (이 경우 TVANFOSSON의 기능은 잘 작동하지만 Google 웹 로그 분석 데이터를 작업 할 때 많은 정보가 저를 미치게 만들었 으므로이 솔루션을 찾아야합니다).
function showResults(name) {
var deferred = $.Deferred, requests = [];
requests.push($.ajax({url:"/path/to/uri/?name=" + name, type: "GET", async: false}).done(function(d) {
//alert or process the results as you wish
}));
$.when.apply(undefined, requests).then(function() { deferred.resolve(); });
return deferred.promise();
}
반환 된 약속 개체도 함께 사용할 수 있습니다 $.when(showResults('benjamin')).done(function() { });
사후 수정 (차트/그래프 설정 등)의 경우. 완전히 재사용 할 수 있습니다. 이 기능을 $. 회의 요청과 같은 루프에 넣을 수도 있습니다.
function updateResults() {
var deferred = $.Deferred, requests = [];
requests.push($.ajax(url:"/path/to/names/?nameArr=" + jsonArrOfNames, type: "GET", async: false}).done(function(res) { requests.push(showResults(res[0]));}) );
$.when.apply($, requests).then(function() { deferred.resolve(); });
return deferred.promise();
}