jQuery: Ajax 호출 성공 후 데이터 반환

jQuery: Ajax 호출 성공 후 데이터 반환

이 질문에는 이미 답변이 있습니다.

비동기 콜에서 응답을 반환하려면 어떻게 해야 하나요? (43 회답)

닫힘9년 전.

이런 게 있어요. 스크립트를 호출하면 값이나 문자열을 얻을 수 있어요.

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         return data; 
      }
   });
}

이런 전화를 하면

var output = testAjax(svar);  // output will be undefined...

그럼 어떻게 하면 값을 반환할 수 있을까요?아래 코드도 작동하지 않는 것 같습니다...

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {

      }
   });
   return data; 
}

2010년 2월 2일.
하단에서 2015년, 2016년 및 2017년 업데이트를 참조하십시오.

비동기 함수에서는 아무것도 반환할 수 없습니다.당신이 돌려줄 수 있는 것은 약속입니다.다음 질문에 대한 답변에서 jQuery에서 약속이 어떻게 작동하는지 설명했습니다.

• AJAX 콜 데이터를 반환하는 JavaScript 함수
• jQuery jqXHR - 연결된 콜 취소, 오류 체인의 트리거

왜 데이터를 반환하고 싶은지, 나중에 어떻게 하고 싶은지 설명해 주시면 더 구체적인 답변을 드릴 수 있을 것 같습니다.

일반적으로 다음 대신:

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

testAjax 함수를 다음과 같이 쓸 수 있습니다.

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

그러면 다음과 같은 약속을 얻을 수 있습니다.

var promise = testAjax();

약속을 저장하거나 전달하거나 함수 호출에서 인수로 사용하거나 함수에서 반환할 수 있습니다.다만, 최종적으로 AJAX 콜에 의해서 반환되는 데이터를 사용하는 경우는, 다음과 같이 실시할 필요가 있습니다.

promise.success(function (data) {
  alert(data);
});

(간단한 구문은 아래 업데이트를 참조하십시오.)

이 시점에서 데이터를 사용할 수 있는 경우 이 기능이 즉시 호출됩니다.그렇지 않은 경우 데이터를 사용할 수 있는 즉시 호출됩니다.

이 모든 작업을 수행하는 요점은 데이터가 비동기적이기 때문에 $.ajax 호출 직후에 데이터를 사용할 수 없다는 것입니다.약속은 함수가 다음과 같이 말할 수 있는 훌륭한 추상화입니다.아직 데이터를 가지고 있지 않기 때문에 데이터를 반환할 수 없습니다.차단해서 기다리게 하고 싶지 않기 때문에 대신 나중에 사용할 수 있습니다.또는 다른 사람에게 주고 끝낼 수도 있습니다.

이 DEMO를 참조해 주세요.

갱신(2015년)

현재(2015년 3월 현재) jQuery Promise는 Promise/A+ 사양과 호환되지 않으므로 다른 Promise/A+ 준수 구현과 잘 협력하지 않을 수 있습니다.

그러나 향후 버전 3.x의 jQuery Promites는 Promise/A+ 사양에 호환됩니다(Benjamin Gruenbaum이 지적해 준 덕분입니다).현재(2015년 5월 현재) jQuery의 안정 버전은 1.x와 2.x입니다.

위에서 설명한(2011년 3월)은 jQuery Deferred Objects를 사용하여 값을 반환함으로써 동기 코드로 달성되는 작업을 비동기적으로 수행하는 방법입니다.

그러나 동기 함수 호출은 두 가지 작업을 수행할 수 있습니다. 즉, 값을 반환할 수 있는 경우 값을 반환할 수 있는 경우 또는 예외(값을 반환할 수 없는 경우입니다.Promise/A+는 동기 코드의 예외 처리와 거의 동일한 방식으로 이러한 두 가지 사용 사례를 해결합니다.jQuery 버전에서는 값을 반환하는 것과 동등한 값을 처리하지만 복잡한 예외 처리와 동등한 값은 다소 문제가 있습니다.

특히 동기 코드에서의 예외 처리의 요점은 단순히 멋진 메시지를 포기하는 것이 아니라 문제를 수정하고 실행을 계속하려고 하거나 프로그램의 다른 일부에 대해 동일하거나 다른 예외를 재투입하는 것입니다.동기 코드에는 콜스택이 있습니다.비동기식 콜에서는 그렇지 않으며 Promise/A+ 사양에서 요구하는 고급 예외 처리는 복잡한 사용 사례에서도 의미 있는 방식으로 오류 및 예외를 처리하는 코드를 작성하는 데 도움이 됩니다.

jQuery와 다른 구현 간의 차이점 및 jQuery 약속을 Promise/A+ 준거로 변환하는 방법은 Q 라이브러리 위키의 "Coming from jQuery by Chris Kowal et al."을 참조하고 HTML5 Rocks의 Jake Archibald의 JavaScript에 Promit을 도착하십시오.

진정한 약속을 돌려주는 방법

위의 예에서 본 함수는 다음과 같습니다.

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

jqXHR 오브젝트(jQuery Deferred Object)를 반환합니다.

실제 약속을 반환하려면 Q Wiki에서 다음 방법으로 변경할 수 있습니다.

function testAjax() {
  return Q($.ajax({
      url: "getvalue.php"
  }));
}

또는 HTML5 Rocks 기사의 방법을 사용하여 다음을 수행합니다.

function testAjax() {
  return Promise.resolve($.ajax({
      url: "getvalue.php"
  }));
}

★★★★★★★★★★★★★★★★★.Promise.resolve($.ajax(...))또한 모듈 매뉴얼에 설명되어 있으며 ES6와 연동해야 합니다.

현재 ES6 Promise를 사용하려면 Jake Archibald의 es6-promise 모듈을 사용하십시오.

폴리필을 사용하지 않고 ES6 Promise를 사용할 수 있는 위치에 대해서는, 「Can I use : Promise 。

자세한 내용은 다음을 참조하십시오.

• http://bugs.jquery.com/ticket/14510
• https://github.com/jquery/jquery/issues/1722
• https://gist.github.com/domenic/3889970
• http://promises-aplus.github.io/promises-spec/
• http://www.html5rocks.com/en/tutorials/es6/promises/

jQuery의 미래

jQuery의 향후 버전(3.x부터 시작, 2015년 5월 현재 안정 버전은 1.x 및 2.x)은 Promise/A+ 사양과 호환됩니다(댓글에 Benjamin Gruenbaum이 지적해 준 덕분입니다)."이미 결정된 두 가지 변경 사항은 지연된 구현을 위한 Promise/A+ 호환성입니다 [...](jQuery 3.0과 웹 개발의 미래).자세한 내용은 jQuery 3.0: The Next Generations by Dave Methvin and jQuery 3.0: Internet Explorer by Paul Krill을 통한 상호 운용성 향상, 인터넷 익스플로러 감소를 참조하십시오.

흥미로운 강연

• 붐, 약속/A+ 도메닉 데니콜라 탄생(JSConf)미국 2013년)
• Michael Jackson과 Domainic Denicola의 콜백 지옥으로부터의 구제 (HTML5DevConf 2013)
• David M의 JavaScript 약속Lee (2014년 노드)

갱신(2016년)

ECMA-262 제6판, 섹션 14.2에는 화살표 함수라는 새로운 구문이 있어 위의 예를 더욱 단순화하기 위해 사용할 수 있습니다.

다음 대신 jQuery API 사용:

promise.success(function (data) {
  alert(data);
});

다음과 같이 쓸 수 있습니다.

promise.success(data => alert(data));

또는 Promise/A+ API를 사용합니다.

promise.then(data => alert(data));

항상 다음 중 하나에 거부 핸들러를 사용해야 합니다.

promise.then(data => alert(data), error => alert(error));

또는 다음 항목과 함께:

promise.then(data => alert(data)).catch(error => alert(error));

약속과 함께 항상 거부 핸들러를 사용해야 하는 이유를 보려면 다음 답변을 참조하십시오.

• Promise 거부를 비동기적으로 처리하지 않아야 합니까?

이 에서는 그냥 of of론 、 음음 、 of음 、 음음 、 of of of of of of 。promise.then(alert) 막 alert과 같은 만, 인 것으로, 할 수 있습니다.

promise.then(data => alert("x is " + data.x));

일부 브라우저는 아직 이 구문을 지원하지 않지만, 예를 들어 Chrome 확장자, Firefox 애드온 또는 Electron, NW.js 또는 AppJ를 사용하여 데스크톱 응용 프로그램을 작성할 때 코드가 어떤 브라우저에서 실행될지 확신할 수 있는 경우가 있습니다(자세한 내용은 이 답변을 참조하십시오).

화살표 기능의 서포트에 대해서는, 다음을 참조해 주세요.

• http://caniuse.com/ #filename=filename-filename
• http://kangax.github.io/compat-table/es6/ #test-filename_filename

갱신(2017년)

.await 키워드를 합니다.

functionReturningPromise()
    .then(data => console.log('Data:', data))
    .catch(error => console.log('Error:', error));

를 사용하면 다음과 같이 쓸 수 있습니다.

try {
    let data = await functionReturningPromise();
    console.log('Data:', data);
} catch (error) {
    console.log('Error:', error);
}

할 수 은, 「」로 입니다.async키워드를 지정합니다.상세한 것에 대하여는, 다음을 참조해 주세요.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

브라우저에서의 지원에 대해서는, 다음을 참조해 주세요.

• http://caniuse.com/async-functions

노드에서의 지원에 대해서는, 다음을 참조해 주세요.

• http://node.green/#ES2017-features-async-functions

async ★★★★★★★★★★★★★★★★★」await바벨라

• https://babeljs.io/docs/plugins/transform-async-to-generator/

조금 입니다.co블루버드 코루틴:

• https://www.npmjs.com/package/co
• http://bluebirdjs.com/docs/api/promise.coroutine.html

상세 정보

자세한 내용은 약속에 대한 기타 질문:

• 약속 해결과는 별개로 콜을 약속하다
• Q Promise 지연
• Promise가 아닌 Promise 결과 반환
• 약속 결과에서 모듈 내보내기
• 약속 해결이 뭐가 문제죠?
• 약속 블록에서 함수의 값을 반환합니다.
• 어떻게 하면 약속 내에서 상태를 되돌릴 수 있나요?
• Promise 거부를 비동기적으로 처리하지 않아야 합니까?
• JavaScript의 지연/약속 개념은 새로운 개념입니까, 아니면 기능 프로그래밍의 전통적인 일부입니까?
• 이러한 기능을 약속과 연계하려면 어떻게 해야 합니까?
• 약속.모두 JavaScript:모든 약속에 대한 해결 가치를 얻는 방법
• 약속하는 이유모두 정의되어 있지 않다
• 함수는 javascript post/get에서 null을 반환합니다.
• promisify에 의해 작성된 체인 내에서 cancel()을 사용합니다.모든.
• Promise.then()에 비함수 파라미터를 에러 발생 없이 전달할 수 있는 이유는 무엇입니까?
• 약속 이행 패턴
• 약속과 퍼포먼스
• 약속이 있는 두 개의 URL을 스크랩하는 데 문제가 있습니다.
• http.request가 'end' 이벤트에 대한 반환을 지정한 후에도 데이터를 반환하지 않음
• async.각자가 약속을 사용할 때 반복되지 않음
• jQuery jqXHR - 연결된 콜 취소, 오류 체인의 트리거
• 약속 및 서버 응답의 올바른 처리 방법
• 함수 자체의 모든 작업을 완료하기 전에 함수 호출에서 값을 반환하시겠습니까?
• API 끝점 내에서 setTimeout 해결
• 비동기 함수의 대기
• AJAX 콜 데이터를 반환하는 JavaScript 함수
• 비동기/비동기/비동기 블록의 시행/실행
• jQuery가 해결/완료된 콜백을 순서대로 호출하지 않음
• Ajax에서 데이터를 반환하면 이상한 개체가 생성됩니다.
• javascript - 동기 모듈 및 비동기 모듈 사양이 있는 이유는 무엇입니까?

함수에서 데이터를 반환하는 유일한 방법은 비동기 호출 대신 동기 호출을 하는 것이지만, 응답을 기다리는 동안 브라우저가 정지됩니다.

결과를 처리하는 콜백 함수를 전달할 수 있습니다.

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

이렇게 불러주세요.

testAjax(function(output){
  // here you use the output
});
// Note: the call won't wait for the result,
// so it will continue with the code here while waiting.

false에 비동기 옵션을 추가하여 ajax 콜 외부로 되돌릴 수 있습니다.

function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data; 
      }
   });
   return result;
}

문제를 해결하셨다면 다른 방법을 추천해 드리겠습니다.그렇게 하면 효과가 있습니다.

    ServiceUtil = ig.Class.extend({
        base_url : 'someurl',

        sendRequest: function(request)
        {
            var url = this.base_url + request;
            var requestVar = new XMLHttpRequest();
            dataGet = false;

            $.ajax({
                url: url,
                async: false,
                type: "get",
                success: function(data){
                    ServiceUtil.objDataReturned = data;
                }
            });
            return ServiceUtil.objDataReturned;                
        }
    })

여기서 중요한 것은 비동기: false를 추가하면 데이터가 취득될 때까지 모든 것이 대기한다는 것입니다.그런 다음 클래스의 정적 변수에 할당하면 모든 것이 마법처럼 작동합니다.

jquery docs 예:http://api.jquery.com/jQuery.ajax/ (페이지 약 2/3)를 참조해 주세요.

다음의 코드를 찾고 있는 경우가 있습니다.

    $.ajax({
     url: 'ajax/test.html',
     success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
});

같은 페이지...몸을 낮추다

언급URL : https://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success