development

jQuery : 아약스 호출 성공 후 데이터 반환

big-blog 2020. 2. 17. 22:21
반응형

jQuery : 아약스 호출 성공 후 데이터 반환

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

나는 값과 문자열을 돌려주는 스크립트를 간단하게 호출하는 것과 같은 것을 가지고있다.

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

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

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

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.

참고 :이 답변은 2010 년 2 월에 작성되었습니다
. 하단의 2015, 2016 및 2017의 업데이트를 참조하십시오.

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

왜 데이터를 반환하고 싶고 나중에 무엇을하고 싶은지 설명 할 수 있다면 더 구체적인 방법을 알려줄 수있을 것입니다.

일반적으로 다음 대신

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를 호출 한 직후에 데이터를 사용할 수 없다는 것입니다. 약속은 함수에 대한 훌륭한 추상화입니다. 아직 데이터가 없기 때문에 데이터를 반환 할 수 없으며 차단하고 기다리지 않기를 약속합니다. 대신 약속을 지키십시오. 나중에 사용하거나 다른 사람에게 제공하여 완료하십시오.

이 데모를 참조하십시오 .

업데이트 (2015)

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

그러나 곧 버전 3.x에서의 jQuery 약속 합니다 (덕분에 약속 / A + 사양과 호환 될 벤자민 Gruenbaum 을 지적). 현재 (2015 년 5 월 기준) 안정적인 jQuery 버전은 1.x 및 2.x입니다.

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

그러나 동기 함수 호출은 두 가지 작업을 수행 할 수 있습니다. 값을 반환하거나 (가능한 경우) 예외를 throw 할 수 있습니다 (값을 반환 할 수없는 경우). Promises / A +는 동기 코드의 예외 처리와 매우 유사한 방식으로 이러한 사용 사례를 모두 해결합니다. jQuery 버전은 값을 올바르게 반환하는 것과 동등한 것을 처리하지만 복잡한 예외 처리와 동등한 것은 다소 문제가 있습니다.

In particular, the whole point of exception handling in synchronous code is not just giving up with a nice message, but trying to fix the problem and continue the execution, or possibly rethrowing the same or a different exception for some other parts of the program to handle. In synchronous code you have a call stack. In asynchronous call you don't and advanced exception handling inside of your promises as required by the Promises/A+ specification can really help you write code that will handle errors and exceptions in a meaningful way even for complex use cases.

/ A + 준수 약속에 jQuery를 약속을 변환하는 jQuery를 다른 구현 방법의 차이를 들어, 참조 jQuery를에서 오는 크리스 Kowal의 등으로. Q 라이브러리 위키에서 Promises 는 HTML5 Rocks에서 Jake Archibald 가 JavaScript 로 제공합니다.

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

위의 예에서 나온 기능 :

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

jQueryX Deferred Object 인 jqXHR 객체를 반환합니다 .

진정한 약속을 돌려주기 위해 Q wiki의 메소드를 사용하여 다음과 같이 변경할 수 있습니다 .

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

또는 HTML5 Rocks 기사의 방법을 사용 하십시오 .

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

이것은 Promise.resolve($.ajax(...))무엇도 설명 promise모듈 문서 과 함께 작동합니다 ES6Promise.resolve() .

오늘날 ES6 약속을 사용하려면 Jake Archibald 의 es6 약속 모듈을polyfill() 사용할 수 있습니다 .

폴리 필없이 ES6 Promises를 사용할 수있는 곳을 보려면 다음을 사용할 수 있습니다 : Promises .

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

jQuery의 미래

향후 버전의 jQuery (3.x부터 시작-2015 년 5 월 현재의 안정적인 버전은 1.x 및 2.x 임)는 Promises / A + 사양 과 호환됩니다 ( Benjamin Gruenbaum 덕분에 주석에서 지적). "우리가 이미 결정한 두 가지 변경 사항은 지연된 구현을위한 Promise / A + 호환성입니다 ...] ( jQuery 3.0 및 웹 개발의 미래 ). 자세한 내용은 jQuery 3.0 : Dave Methvin과 jQuery 3.0의 차세대 : Paul Krill의 Internet Explorer 가 아닌 상호 운용성이 향상 되었습니다.

재미있는 대화

업데이트 (2016)

ECMA-262, 6 판, 14.2 절에 화살표 함수 라고 하는 새로운 구문이 있으며 , 위 의 예를 더욱 단순화하는 데 사용할 수 있습니다.

다음 대신 jQuery API를 사용하십시오.

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

당신은 쓸 수 있습니다:

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

또는 Promises / 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.then(alert)호출하기 때문에 사용할 수 alert있지만 화살표 구문이 더 일반적이며 다음과 같은 것을 작성할 수 있습니다.

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

일부 브라우저는이 구문을 아직 지원하지는 않지만 Chrome 확장 프로그램 , Firefox 추가 기능 또는 Electron, NW.js 또는 AppJS (자세한 내용은 이 답변 참조).

화살표 기능 지원에 대해서는 다음을 참조하십시오.

업데이트 (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키워드로 만든 함수 내에서만 사용할 수 있습니다 . 자세한 내용은 다음을 참조하십시오.

브라우저 지원에 대해서는 다음을 참조하십시오.

노드 지원에 대해서는 다음을 참조하십시오.

장소에서는 네이티브 지원이없는 곳 async과 await는 바벨 사용할 수 있습니다 :

또는 약간 다른 구문으로 in co또는 Bluebird 코 루틴 과 같은 생성기 기반 접근 방식 :

더 많은 정보

자세한 내용은 약속에 대한 다른 질문들 :

false로 비동기 옵션을 추가 할 수 있습니다 및 아약스 호출 외부 돌아갑니다.

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

Idk 당신이 그것을 해결했지만 다른 방법을 권장하며 작동합니다 :)

    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;                
        }
    })

따라서 여기서 중요한 아이디어는 async : false를 추가하여 데이터가 검색 될 때까지 모든 것을 대기시키는 것입니다. 그런 다음 클래스의 정적 변수에 할당하면 모든 것이 마술처럼 작동합니다. :)

jquery 문서 예제를 참조하십시오 : 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



도와주세요.


반응형

'development' 카테고리의 다른 글

현재 실행중인 메소드의 이름 얻기  (0) 2020.02.17
특정 값을 포함하는 배열이있는 문서 찾기  (0) 2020.02.17
MySQL에서 열의 데이터 유형을 어떻게 변경합니까?  (0) 2020.02.17
JavaScript에서 유휴 시간을 우아하게 감지하는 방법은 무엇입니까?  (0) 2020.02.17
프로그래밍 방식으로 머신에서 코어 수 찾기  (0) 2020.02.17

'development'의 다른글

  • 현재글jQuery : 아약스 호출 성공 후 데이터 반환

관련글

댓글

티스토리툴바