복붙노트

[JQUERY] jQuery를 : 아약스 호출 성공 후 반환 데이터 [중복]

JQUERY

jQuery를 : 아약스 호출 성공 후 반환 데이터 [중복]

해결법

  1. 1.기능에서 데이터를 반환 할 수있는 유일한 방법은 대신 비동기 호출의 동기 호출을하는 것입니다, 그러나 응답을 기다리고있는 동안 즉, 브라우저를 동결 것이다.

    기능에서 데이터를 반환 할 수있는 유일한 방법은 대신 비동기 호출의 동기 호출을하는 것입니다, 그러나 응답을 기다리고있는 동안 즉, 브라우저를 동결 것이다.

    당신은 결과를 처리하는 콜백 함수에 전달할 수 있습니다 :

    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.

  2. 2.참고 :이 답변은 아래에 2015, 2016 및 2017 가입일 February 2010.See 업데이트에 작성되었습니다.

    참고 :이 답변은 아래에 2015, 2016 및 2017 가입일 February 2010.See 업데이트에 작성되었습니다.

    당신은 비동기 함수에서 아무것도 반환 할 수 없습니다. 당신이 반환 할 수있는 것은 약속입니다. 나는 약속이 그 질문에 대한 내 대답에 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);
});

    (참조 단순화 구문은 아래를 업데이트합니다.)

    데이터가이 시점에서 사용할 수있는 경우이 함수는 즉시 호출됩니다. 그 다음 아닌 경우는 즉시 데이터를 사용할 수있게되면 호출됩니다.

    이 모든 일의 요점은 데이터가 $ 아약스 호출이 비동기이기 때문에 즉시 사용할 수없는 것입니다. 약속은 기능이 말을 할 수있는 좋은 추상화입니다 : 내가이 없기 때문에 아직 당신에게 데이터를 반환 할 수없는 내가 차단하고 당신이 그렇게 여기서 기다려 약속 대신의 만들고 싶어하지 않고 작업을 할 수 있습니다 나중에 사용하거나 다른 사람에게주고 그것으로 할 수.

    이 데모를 참조하십시오.

    현재 (3 월, 2015 등)의 jQuery 약속은 그들이 다른 약속 / A + 준수 구현과 잘 협력하지 않을 수 있음을 의미 약속 / A + 사양과 호환되지 않습니다.

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

    내가 (2011 년 월) 위에서 설명한 것은 동기 코드에 값을 반환하여 달성 할 것이라고 비동기 적으로 뭔가를 jQuery를 이연 객체를 사용하는 방법입니다.

    그러나 동기 함수 호출은 두 가지 일을 할 수있다 - 그것은 하나의 값을 반환 (그것을 할 수있는 경우) 또는 (가 값을 반환 할 수없는 경우) 예외를 던질 수 있습니다. 꽤 많은 동기 코드에서 예외 처리 등의 강력한 그대로 방식으로 그 사용의 경우 모두 약속 / A + 주소. 잘 값을 반환하지만 등가 복잡한 예외 처리의 등가 JQuery와 버전 핸들은 다소 문제가된다.

    특히, 동기 코드에서 예외 처리의 요점은 단지 좋은 메시지와 함께 포기하지만, 실행 문제를 해결하고 계속하려고, 또는 아마도 동일하거나 프로그램의 다른 부분에 대해 다른 예외를 rethrowing되지 않는다 핸들. 동기 코드에서 당신은 호출 스택을 가지고있다. 정말 복잡한 사용 사례에 대한 의미있는 방식으로 오류와 예외를 처리하는 코드를 작성하는 데 도움 수있는 약속 / A + 사양에서 요구하는 비동기 호출에 당신은 당신의 약속을하지 고급 예외 처리 안쪽을한다.

    / A + 준수 약속에 jQuery를 약속을 변환하는 jQuery를 다른 구현 방법의 차이를 들어, 크리스 Kowal의 등으로 jQuery를에서 오는 참조하십시오. 질문 라이브러리 위키와 약속에 HTML5 바위에 제이크 아치 볼드가 자바 스크립트에 도착.

    내 위의 예제의 기능 :

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

    JQuery와 이연 객체 인 jqXHR 객체를 반환합니다.

    그것이 진짜 약속을 반환하려면, 당신은 그것을 변경할 수 있습니다 - 질문 위키에서 방법을 사용하여 :

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

    또는, HTML5에서 방법을 사용하여 기사를 록스 :

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

    이 Promise.resolve ($. 아약스 (...)) 약속 모듈 문서에서 설명하고 ES6 Promise.resolve 작업을해야하는지 또한 ().

    당신이 제이크 아치 볼드에 의해 ES6 - 약속 모듈의 polyfill ()를 사용할 수 오늘 ES6의 약속을 사용합니다.

    당신이 polyfill없이 ES6 약속을 사용할 수있는 곳을 확인하려면 다음을 참조하십시오 할 수 있습니까 사용을 : 약속을.

    더 많은 정보를 참조하십시오 :

    jQuery를 미래 버전 - 약속 / A + 사양 (코멘트에서 그것을 지적 벤자민 Gruenbaum 덕분에)와 호환됩니다 (3.X부터 2015 년 5 월과 같은 현재 안정 버전 1.x 및 2.x에서이다). "2 우리가 이미 결정된했다고 변경됩니다 약속 / A + 우리 이연 구현 [...]에 대한 호환성"(jQuery를 3.0 및 웹 개발의 미래). 더 많은 정보를 참조하십시오 : jQuery를 3.0 : 폴 크릴으로 더 많은 상호 운용성, 덜 Internet Explorer를 데이브 Methvin 및 jQuery를 3.0에 의해 다음 세대.

    더 위의 예를 단순화하기 위해 사용될 수있다라는 기능 화살표 ECMA-262, 6 판, 제 142에서 새로운 신택스가있다.

    대신, JQuery와 API를 사용하여 :

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

    당신은 쓸 수 있습니다:

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

    또는 약속을 사용하여 / 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 사용할 수 있습니다 :

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

    아니 모든 브라우저가 아직이 구문을 지원하지만 확실히 코드가 실행됩니다 어떤 브라우저있어 어떤 경우가있다 - 예를 Chrome 확장을 작성할 때, 파이어 폭스 온 추가하거나 전자, NW.js 또는 AppJS를 사용하여 데스크톱 응용 프로그램 (자세한 내용은이 대답을 참조).

    화살표 기능의 지원은 다음을 참조하십시오

    지금 그 대신에이 코드의 새로운 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);
}

    당신은 비동기 키워드로 생성 된 함수 내부에 사용할 수 있습니다. 더 많은 정보를 원하시면 다음을 참조하십시오

    브라우저에서 지원을 참조하십시오

    노드에서 지원을 참조하십시오

    당신이 비동기에 대한 네이티브 지원이 있고 바벨을 사용할 수 있습니다 기다리고하지 않는 장소에서 :

    또는 약간 다른 구문 발전기는 CO 또는 블루의 코 루틴 등의 방식을 기반 :

    자세한 내용은 약속에 대한 몇 가지 다른 질문 :

  3. 3.당신은 아약스 호출 외부 거짓과 반환에 비동기 옵션을 추가 할 수 있습니다.

    당신은 아약스 호출 외부 거짓과 반환에 비동기 옵션을 추가 할 수 있습니다.

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

  4. 4.너희들이 그것을 해결하면 나도 몰라하지만 난 그것을 할 다른 방법을 추천하고, 그것을 작동합니다 :)

    너희들이 그것을 해결하면 나도 몰라하지만 난 그것을 할 다른 방법을 추천하고, 그것을 작동합니다 :)

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

    그래서 여기에 주요 아이디어는 비동기를 추가하여, 그입니다 : 잘못된 데이터가 검색 될 때까지 당신이 모든 대기를합니다. 그럼 당신은 클래스의 정적 변수에 할당하고, 모든 마술 작동합니다 :)

  5. 5.JQuery와 문서의 예를 참조하십시오 : http://api.jquery.com/jQuery.ajax/ (2/3 페이지에 대한)

    JQuery와 문서의 예를 참조하십시오 : http://api.jquery.com/jQuery.ajax/ (2/3 페이지에 대한)

    당신은 다음의 코드를 찾고있을 수 있습니다 :

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

    같은 페이지 ... 아래로 내립니다.

    6. from https://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 JQuery와 동기보다는 비동기, Ajax 요청을 수행 할 수 있습니까?  (0) 2020.09.22
[JQUERY] CSTE 연구진은 .click 대 ( '클릭')의 차이 ()  (0) 2020.09.22
[JQUERY] 어떻게 일시적으로 스크롤 해제하는 방법?  (0) 2020.09.22
[JQUERY] Attr의 대 jQuery를 데이터?  (0) 2020.09.22
[JQUERY] HTML은 텍스트 입력은 숫자 만 입력 가능  (0) 2020.09.22
,

티스토리툴바