jquery-성공시 ajax 결과를 사용하여 값 반환

jquery $ .ajax () 함수에 작은 문제가 있습니다.

라디오 버튼을 클릭하거나 드롭 다운 메뉴에서 선택할 때마다 선택한 값으로 세션 변수가 생성되는 양식이 있습니다.

이제 4 개의 옵션이있는 드롭 다운 메뉴 중 하나가 있습니다. 첫 번째 항목 (레이블 없음)에는 value = ""가 있고 다른 하나에는 ID가 있습니다.

내가 원하는 것은 없음 옵션 (빈 값 포함)을 사용하여 세션을 제거하고 다른 세션을 생성하는 것입니다. 그러나이 특정 선택 이름을 가진 세션이 아직 존재하지 않는 경우에만-다른 모든 옵션에 동일한 양이 할당되어 있습니다. -어떤 것이 선택되었는지 표시하는 것입니다.

그게 말이되는지 잘 모르겠지만 코드를 살펴보면 더 명확해질 것입니다.

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();


        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            if(isSession(name) == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
});

그래서-우선 #add_ons 선택 메뉴가 "변경"을 트리거 할 때 계산을 위해 몇 가지 요소에서 일부 값을 얻습니다.

합계에 추가 할 값을 저장하는 선택 항목에서 옵션의 레이블 속성을 가져오고,이 이름으로 세션을 생성하기위한 선택의 이름과 나중에 어느 항목이 선택되었는지 확인합니다.

이제-val == ""(없음 옵션이 선택되었음을 나타냄) 여부를 확인하고 총액에서 금액을 공제하고 선택한 이름으로 세션을 제거합니다.

이것이 문제가 시작되는 곳입니다-else 문.

그렇지 않으면-선택 자의 이름을 가진 isSession () 함수가 0 또는 1을 반환하는지 확인하고 싶습니다. 0을 반환하면 label 속성에 저장된 값을 합계에 추가하지만 1을 반환하면 제안합니다. 해당 세션이 이미 존재합니다. 그러면이 세션을 다시 생성하여이 세션의 값만 변경하지만 금액은 여기에 추가되지 않습니다.

이제 isSession 함수는 다음과 같습니다.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

이제 문제는- "return"을 사용하는 것이 함수의 결과를 반환하는지 여부를 모르겠다는 것입니다. 작동하지 않는 것 같습니다. 그러나 "data"를 success : 섹션에 넣으면 경고-올바른 값을 반환하는 것 같습니다.

누구든지 함수에서 값을 반환하고 다음 문에서 비교하는 방법을 알고 있습니까?

고마워요-다음과 같은 방법으로 시도했습니다.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            updateResult(data);
        },
        error: function() {
            alert('Error occured');
        }
    });
}

그런 다음 updateResult () 함수 :

function updateResult (data) {결과 = 데이터; }

결과-전역 변수입니다-내가 읽으려고합니다.

$("#add_ons select").change(function() {
        // get current price of the addons
        var order_price_addon = $(".order_price_addon").text();
        // get price of the clicked radio button from the rel attribute
        var add = $(this).children('option').attr('label');
        var name = $(this).attr('name');
        var val = $(this).val();


        if(val == "") {
            var price = parseInt(order_price_addon) - parseInt(add);
            removeSession(name);
        } else {
            isSession(name);
            if(result == 0) {
                var price = parseInt(order_price_addon) + parseInt(add);
            }   
            setSession(name, val);              
        }

        $(".order_price_addon").html(price);    
        setSession('order_price_addon', price);         
        updateTotal();
    });

하지만 어떤 이유로-작동하지 않습니다-어떤 생각?

문제는 AJAX 요청과 같은 비동기 호출에서 값을 반환 할 수없고 작동 할 것으로 기대할 수 없다는 것입니다.

그 이유는 응답을 기다리는 코드가 응답을받을 때까지 이미 실행 되었기 때문입니다.

이 문제에 대한 해결책 은 콜백 내 에서 필요한 코드를 실행하는 것 success:입니다. 그런 식으로 data사용 가능한 경우에만 액세스합니다 .

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
            // Run the code here that needs
            //    to access the data returned
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

또 다른 가능성 (실질적으로 동일한 success:것임)은 사용 가능할 때 데이터를 전달하는 콜백 내부의 함수를 호출하는 것입니다.

function isSession(selector) {
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        success: function(data) {
                // Call this function on success
            someFunction( data );
            return data;
        },
        error: function() {
            alert('Error occured');
        }
    });
}

function someFunction( data ) {
    // Do something with your data
}

jQuery AJAX 응답을 얻는 방법에는 여러 가지가 있습니다. 두 가지 일반적인 접근 방식을 공유합니다.

먼저:

사용 비동기 거짓 = 및 응답 아약스 - object.responseText 함수 반환 아약스 객체 내에서 나중에 도착

/**
 * jQuery ajax method with async = false, to return response
 * @param  {mix}  selector - your selector
 * @return {mix}           - your ajax response/error
 */
function isSession(selector) {
    return $.ajax({
        type: "POST",
        url: '/order.html',
        data: {
            issession: 1,
            selector: selector
        },
        dataType: "html",
        async: !1,
        error: function() {
            alert("Error occured")
        }
    });
}
// global param
var selector = !0;
// get return ajax object
var ajaxObj = isSession(selector);
// store ajax response in var
var ajaxResponse = ajaxObj.responseText;
// check ajax response
console.log(ajaxResponse);
// your ajax callback function for success
ajaxObj.success(function(response) {
    alert(response);
});

둘째:

사용 $ .extend의 방법과 아약스와 같은 새로운 기능을

/**
 * xResponse function
 *
 * xResponse method is made to return jQuery ajax response
 * 
 * @param  {string} url   [your url or file]
 * @param  {object} your ajax param
 * @return {mix}       [ajax response]
 */
$.extend({
    xResponse: function(url, data) {
        // local var
        var theResponse = null;
        // jQuery ajax
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType: "html",
            async: false,
            success: function(respText) {
                theResponse = respText;
            }
        });
        // Return the response text
        return theResponse;
    }
});

// set ajax response in var
var xData = $.xResponse('temp.html', {issession: 1,selector: true});

// see response in console
console.log(xData);

원하는만큼 크게 만들 수 있습니다 ...

나는 여기에서 답을 보았고 도움이되었지만 많은 코드를 변경해야했기 때문에 정확히 내가 원하는 것이 아니 었습니다.

나를 위해 일한 것은 다음과 같은 일이었습니다.

function isSession(selector) {
    //line added for the var that will have the result
    var result = false;
    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({ issession : 1, selector: selector }),
        dataType: "html",
        //line added to get ajax response in sync
        async: false,
        success: function(data) {
            //line added to save ajax response in var result
            result = data;
        },
        error: function() {
            alert('Error occured');
        }
    });
    //line added to return ajax response
    return result;
}

희망은 누군가를 돕습니다

아나킨

사용에 관한 모든 접근 방식은 사용 async: false중단으로 인해 좋지 않으며 요청이 다시 올 때까지 페이지를 멈췄습니다. 따라서 여기에 두 가지 방법이 있습니다.

1st : 함수에서 전체 ajax 응답을 반환 한 다음 done요청이 완료되면 응답을 캡처하는 함수를 사용 합니다. (권장, 최선의 방법)

function getAjax(url, data){
    return $.ajax({
        type: 'POST',
        url : url,              
        data: data,
        dataType: 'JSON',
        //async: true,  //NOT NEEDED
        success: function(response) {
            //Data = response;
        }
    });
 }

위와 같이 전화 :

getAjax(youUrl, yourData).done(function(response){
    console.log(response);
});

여러 AJAX 통화의 경우 $.when다음을 사용하십시오 .

$.when( getAjax(youUrl, yourData), getAjax2(yourUrl2, yourData2) ).done(function(response){
    console.log(response);
});

2nd : 응답을 쿠키에 저장 한 다음 ajax 호출 외부에서 해당 쿠키 값을 가져옵니다. (권장되지 않음)

        $.ajax({
            type: 'POST',
            url : url,              
            data: data,
            //async: false,    // No need to use this
            success: function(response) {
                Cookies.set(name, response);
            }
        });

        // Outside of the ajax call
        var response = Cookies.get(name);

참고 : 위의 예에서는 jquery cookies라이브러리가 사용되었으며 매우 가볍고 빠르게 작동합니다. 다음은 https://github.com/js-cookie/js-cookie 링크입니다.

async: false속성 목록에 추가 하십시오. 이렇게하면 계속 진행하기 전에 반환 값이 검색 될 때까지 자바 스크립트 스레드가 대기하게됩니다. 분명히 모든 상황에서이 작업을 수행하고 싶지는 않지만 진행하기 전에 값이 필요한 경우이를 수행합니다.

이것은 아주 오래되고 추악합니다. 이러지 마십시오. https://stackoverflow.com/a/5316755/591257 콜백을 사용해야합니다
. 그것이 최고인지 확실하지 않지만 확실히 작동합니다. 오류가 발생하면 빈 문자열 (myVar = '')이 표시되므로 필요에 따라 처리 할 수 ​​있습니다.

var myVar = '';
function isSession(selector) {
  $.ajax({
    'type': 'POST',
    'url': '/order.html',
    'data': {
      'issession': 1,
      'selector': selector
    },
    'dataType': 'html',
    'success': function(data) {
      myVar = data;
    },
    'error': function() {
      alert('Error occured');
    }
  });
  return myVar;
}

// Common ajax caller
function AjaxCall(url,successfunction){
  var targetUrl=url;
  $.ajax({
    'url': targetUrl,
    'type': 'GET',
    'dataType': 'json',
    'success': successfunction,
    'error': function() {
      alert("error");
    }
  });
}

// Calling Ajax
$(document).ready(function() {
  AjaxCall("productData.txt",ajaxSuccessFunction);
});

// Function details of success function
function ajaxSuccessFunction(d){
  alert(d.Pioneer.Product[0].category);
}

그것은 도움이 될 수 있습니다, 일반적인 아약스 호출 함수를 만들고 성공할 때 호출하는 함수를 첨부하여 아약스 호출을 참조하십시오.

여기의 도움으로

function get_result(some_value) {
   var ret_val = {};
   $.ajax({
       url: '/some/url/to/fetch/from',
       type: 'GET',
       data: {'some_key': some_value},
       async: false,
       dataType: 'json'
   }).done(function (response) {
       ret_val = response;
   }).fail(function (jqXHR, textStatus, errorThrown) {
           ret_val = null;
       });
   return ret_val;
}

이것이 누군가 어딘가에 도움이되기를 바랍니다.

안녕하세요 ajax 호출에서 async : false 를 시도 하십시오.