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

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

jQuery 에 작은 .$.ajax()기능.

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

- 중 - 에는 에 4 . (Label None ) 에는가 있습니다.value=""다른 사람들은 신분증이 있습니다.

발생하고 싶은 것은 없음 옵션(공백 값)으로 세션을 제거하고 다른 세션을 생성하는 것입니다. 그러나 이 특정 선택 이름을 가진 세션이 아직 없는 경우에만 - 다른 모든 옵션에 할당된 양이 동일하므로 - 어떤 세션을 선택했는지 표시하는 것입니다.

이게 말이 되는지는 잘 모르겠지만 코드를 한 번 보세요. 아마 이렇게 하면 더 분명해질 것입니다.

$("#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_onsselect menu 트리거 "change" 계산을 위해 몇 가지 요소에서 값을 가져옵니다.

총합에 추가할 값을 저장하는 선택 항목, 이 이름으로 세션을 생성할 선택 항목의 이름과 나중에 선택한 항목을 확인하는 선택 항목에서 옵션의 레이블 속성을 가져옵니다.

-이 확인합니다.val == ""(None option이 선택되지 않았음을 나타냅니다) 그리고 합계에서 금액을 공제하고 선택한 사람의 이름으로 세션을 제거합니다.

됩니다.else진술.

외 - .isSession()선택기 이름이 있는 함수는 0 또는 1을 반환합니다 - 0을 반환하면 레이블 속성에 저장된 값을 합하지만 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는 함수가 처럼 보이기 에 "에 반환됩니다. 하지만 성공: 섹션에 "데이터"를 입력하면alert() 것 -다.

함수에서 값을 반환하고 다음 문장에서 비교하는 방법을 아는 사람이 있습니까?

---

감사합니다 여러분. 저는 다음과 같은 방법으로 시도해 보았습니다.

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) {
    result = data;
}

result 그 입니다를 . 그런 다음 읽어보려고 합니다.

$("#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 응답을 얻는 방법은 여러 가지가 있습니다.두 가지 일반적인 접근 방식을 여러분과 공유합니다.

첫번째:

async= false를 사용하고 함수 내에서 ajax-object를 반환하고 나중에 응답 ajax-object를 가져옵니다. 응답 텍스트

/**
 * 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 방법을 사용하고 ajax와 같은 새로운 기능을 만듭니다.

/**
 * 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);

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

의 접근법들이async: false사용이 중지되어 요청이 다시 올 때까지 페이지를 고정했기 때문에 좋지 않습니다.따라서 다음과 같은 두 가지 방법이 있습니다.

번째:후 : all ax 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);
});

두 번째: 응답을 쿠키에 저장한 다음 ax call 밖에서 해당 쿠키 값을 가져옵니다.(권장되지 않음)

        $.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 링크입니다.

여기서 답변을 봤는데 도움이 되기는 했지만 코드를 많이 바꿔야 했기 때문에 제가 원하는 것이 아니었습니다.

제게 도움이 된 것은 이런 일을 하는 것입니다.

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

희망은 누군가를 돕습니다.

아나킨

편집: 이건 꽤 오래된 것이고, 추한 짓은 하지 마세요.콜백: https://stackoverflow.com/a/5316755/591257 을 사용해야 합니다.

편집 2: 페치 API 참조

같은 문제가 있었는데, 글로벌 VAR을 사용해서 이런 식으로 해결했습니다.이게 최고인지는 잘 모르겠지만 확실히 효과가 있습니다.오류가 발생하면 빈 문자열(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;
}

여기서 도움을 받습니다.

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

이것이 누군가에게 조금이나마 도움이 되기를 바랍니다.

더하다async: false당신의 속성 목록에.그러면 다음 단계로 넘어가기 전에 반환 값이 검색될 때까지 javascript 스레드를 강제로 대기시킵니다.물론 모든 상황에서 이 작업을 수행하고 싶지는 않겠지만, 진행하기 전에 값이 필요하다면 이렇게 하면 됩니다.

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

그것은 도움이 될 수도 있고, 공통적인 ajax call 함수를 만들고 ajax call 성공할 때 호출하는 함수를 첨부할 수도 있습니다, 예를 참조하십시오.

hi try async: ajax 호출에서 거짓..

function get_rows(param) {
   var rows = '';
   $.ajax({
       url: 'https://www.exmple.com/test.php',
       type: 'POST',
       data: {'key': value},
       async: false,
       dataType: 'html'
   }).done(function (data) {
       rows = data;
   }).fail(function (jqXHR, textStatus, errorThrown) {
       rows = '';
   });
   return rows;
}

합니다.async: false은 매우 이 됩니다 그것은 매우 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/3302702/jquery-return-value-using-ajax-result-on-success