복붙노트

[JQUERY] 콜백에 더 많은 파라미터를 전달 JQUERY

JQUERY

콜백에 더 많은 파라미터를 전달 JQUERY

해결법

  1. 1.이 용액을 밀폐 변수를 통해 결합된다.

    이 용액을 밀폐 변수를 통해 결합된다.

    좀더 기본적인 예로서, 여기서 수신 콜백 함수뿐만 아니라, 예시적인 콜백 함수를 호출하는 함수의 예이다 :

    function callbackReceiver(callback) {
    callback("Hello World");
}

function callback(value1, value2) {
    console.log(value1, value2);
}

    이 콜백을 호출하고 단일 인수를 제공합니다. 지금 당신은 당신이 폐쇄에 콜백을 감싸도록 추가 인수를 제공하고자합니다.

    callbackReceiver(callback);     // "Hello World", undefined
callbackReceiver(function(value) {
    callback(value, "Foo Bar"); // "Hello World", "Foo Bar"
});

    또는, 더 간단하게 ES6 화살표 기능을 사용하여 :

    callbackReceiver(value => callback(value, "Foo Bar")); // "Hello World", "Foo Bar"

    특정 예에 관해서는, 나는 jQuery를에 .post 기능을 사용하지 않은,하지만 문서의 빠른 검사는 콜 다시 다음 서명 함수 포인터이어야한다 제안한다 :

    function callBack(data, textStatus, jqXHR) {};

    그러므로 나는 다음과 같은 솔루션이 생각 :

    var doSomething = function(extraStuff) {
    return function(data, textStatus, jqXHR) {
        // do something with extraStuff
    };
};

var clicked = function() {
    var extraStuff = {
        myParam1: 'foo',
        myParam2: 'bar'
    }; // an object / whatever extra params you wish to pass.

    $.post("someurl.php", someData, doSomething(extraStuff), "json");
};

    해프닝은 무엇인가?

    마지막 줄에는 해봐요 (extraStuff)를 호출하고 호출의 결과는 함수 포인터이다.

    extraStuff 해봐요은 인수로 전달되기 때문에 그것은 해봐요 기능의 범위 내에있다.

    extraStuff가 해봐요의 반환 익명 내부 함수에서 참조 될 때이 외부 함수의 extraStuff 인수에 폐쇄에 구속된다. 이렇게 해봐요 반환 후에도 마찬가지입니다.

    나는 위의 테스트를하지 않은,하지만 난 지난 24 시간 동안 매우 유사한 코드를 작성했습니다 내가 설명한대로 작동합니다.

    당신은 물론 대신 하나의 'extraStuff'개체가 코딩 표준 / 개인 선호도에 따라의 여러 변수를 전달할 수 있습니다.

  2. 2.해봐요 (데이터, myDiv)를 사용할 때, 당신은 실제로 함수를 호출하고 여기에 대한 참조를하지 않습니다.

    해봐요 (데이터, myDiv)를 사용할 때, 당신은 실제로 함수를 호출하고 여기에 대한 참조를하지 않습니다.

    당신도 직접 doStomething 기능을 전달할 수 있지만 올바른 서명이 확인해야합니다.

    당신이 해봐요에게 그것이 방식을 유지하려면, 당신은 익명 함수에의 호출을 래핑 할 수 있습니다.

    function clicked() {
    var myDiv = $("#my-div");
    $.post("someurl.php",someData, function(data){ 
      doSomething(data, myDiv)
    },"json"); 
}

function doSomething(curData, curDiv) {
    ...
}

    익명 함수 코드 내부에서, 당신은 포함하는 범위에 정의 된 변수를 사용할 수 있습니다. 이것은 자바 스크립트 범위 지정이 작동하는 방식이다.

  3. 3.그것은 당신이 헬퍼 함수의 $ 아약스 ({}) 기본 구문 대 하나를 사용하는 경우 특히 ... 실제로 모든 사람의 그것은 소리를 만드는 것보다 쉽습니다.

    그것은 당신이 헬퍼 함수의 $ 아약스 ({}) 기본 구문 대 하나를 사용하는 경우 특히 ... 실제로 모든 사람의 그것은 소리를 만드는 것보다 쉽습니다.

    그냥 키를 전달 : 어떤 객체에서와 같이, 값 쌍 때 설정하여 아약스 요청 (때문에 $ (이)를 아직 상황을 변경되지 않은, 여전히 위의 바인드 호출에 대한 트리거입니다)

    <script type="text/javascript">
$(".qty input").bind("keypress change", function() {
    $.ajax({
        url: "/order_items/change/"+$(this).attr("data-order-item-id")+"/qty:"+$(this).val()+"/returnas.json",
        type: "POST",
        dataType: "json",
        qty_input: $(this),
        anything_else_i_want_to_pass_in: "foo",
        success: function(json_data, textStatus, jqXHR) {
            /* here is the input, which triggered this AJAX request */
            console.log(this.qty_input);
            /* here is any other parameter you set when initializing the ajax method */
            console.log(this.anything_else_i_want_to_pass_in);
        }
    });
});
</script>

    이 더 VAR를 설정하는 것보다있는 이유 중 하나는, 당신은 이론 트리거 할 수, 당신은 아약스 호출을 트리거 할 수있는 2 가지가있는 경우 var에 ... 세계와 같은 덮어 쓸 수로 있다는 것이다 그들을 빨리 아약스 호출 응답에 비해, 그리고 첫 번째로 전달 된 두 번째 통화에 대한 값을 가질 것입니다. 이 방법을 사용하여, 위의, 그런 일이없는 것 (그리고 그것의 아주 간단 너무 사용).

  4. 4.오늘날의 세계에서 청소기, 또 다른 스택 오버플로 대답에서 촬영하는 또 다른 답이있다 :

    오늘날의 세계에서 청소기, 또 다른 스택 오버플로 대답에서 촬영하는 또 다른 답이있다 :

    function clicked()
{
    var myDiv = $( "#my-div" );

    $.post( "someurl.php", {"someData": someData}, $.proxy(doSomething, myDiv), "json" );
}

function doSomething( data )
{
    // this will be equal to myDiv now. Thanks to jQuery.proxy().
    var $myDiv = this;

    // doing stuff.
    ...
}

    여기에 원래의 질문과 대답입니다 : jQuery를 HOW TO? $ 아약스 호출에 성공 콜백에 추가 매개 변수를 전달?

  5. 5.당신은 또한 다음과 같은 것을 시도 할 수 있습니다 :

    당신은 또한 다음과 같은 것을 시도 할 수 있습니다 :

    function clicked() {

    var myDiv = $("#my-div");

    $.post("someurl.php",someData,function(data){
        doSomething(data, myDiv);
    },"json"); 
}

function doSomething(curData, curDiv) {

}

  6. 6.당신은 자바 스크립트의 클로저를 사용할 수 있습니다 :

    당신은 자바 스크립트의 클로저를 사용할 수 있습니다 :

    function wrapper( var1, var2,....) // put here your variables
{
  return function( data, status)
  {
     //Handle here results of call
  }
};

    당신이 할 수있는 경우 :

    $.post("someurl.php",data,wrapper(var1, var2, etc...),"html");

  7. 7.나는 지난 내 게시물에서 실수를했습니다. 이 콜백 함수의 추가 인수를 전달하는 방법은 예를 들어 작업입니다 :

    나는 지난 내 게시물에서 실수를했습니다. 이 콜백 함수의 추가 인수를 전달하는 방법은 예를 들어 작업입니다 :

    function custom_func(p1,p2) {
    $.post(AJAX_FILE_PATH,{op:'dosomething',p1:p1},
        function(data){
            return function(){
                alert(data);
                alert(p2);
            }(data,p2)
        }
    );
    return false;
}

  8. 8.의 간단한 가자! :)

    의 간단한 가자! :)

    $.ajax({
    url: myUrl,
    context: $this, // $this == Current $element
    success: function(data) {
        $.proxy(publicMethods.update, this)(data); // this == Current $element
    }
});

  9. 9.콜백 함수에 추가 매개 변수를 전달하는 아약스 () jQuery를 API와 클로저를 사용하여 비동기 요청을 보내기위한보다 일반적인 솔루션 :

    콜백 함수에 추가 매개 변수를 전달하는 아약스 () jQuery를 API와 클로저를 사용하여 비동기 요청을 보내기위한보다 일반적인 솔루션 :

    function sendRequest(method, url, content, callback) {
    // additional data for the callback
    var request = {
        method: method,
        url: url
    };

    $.ajax({
        type: method,
        url: url,
        data: content
     }).done(function(data, status, xhr) {
        if (callback) callback(xhr.status, data, request);
     }).fail(function(xhr, status) {
        if (callback) callback(xhr.status, xhr.response, request);
     });
};

  10. 10.나를 위해, 그냥 자바 스크립트와 접촉 한 다른 새내기, 나는 Closeure 솔루션이 너무 혼란의 작은 종류라고 생각합니다.

    나를 위해, 그냥 자바 스크립트와 접촉 한 다른 새내기, 나는 Closeure 솔루션이 너무 혼란의 작은 종류라고 생각합니다.

    나는 그것을 발견하는 동안 당신이 jQuery를 사용하여 모든 아약스 콜백 원하는대로, 당신은 쉽게 많은 매개 변수로 전달할 수 있습니다.

    여기에이 개 쉽게 솔루션입니다.

    @zeroasterisk 예컨대, 상기 언급 한 첫있다 :

    var $items = $('.some_class');
$.each($items, function(key, item){
    var url = 'http://request_with_params' + $(item).html();
    $.ajax({
        selfDom     : $(item),
        selfData    : 'here is my self defined data',

        url         : url,
        dataType    : 'json',
        success     : function(data, code, jqXHR){
            // in $.ajax callbacks, 
            // [this] keyword references to the options you gived to $.ajax
            // if you had not specified the context of $.ajax callbacks.
            // see http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings context
            var $item = this.selfDom;
            var selfdata = this.selfData;
            $item.html( selfdata );
            ...
        } 
    });
});

    둘째, 자기 - 확정 datas를 통과 XHR 객체로 추가하여 이는 전체 아약스 - 요청 - 응답 수명에 존재합니다.

    var $items = $('.some_class');
$.each($items, function(key, item){
    var url = 'http://request_with_params' + $(item).html();
    $.ajax({
        url         : url,
        dataType    : 'json',
        beforeSend  : function(XHR) {
            // 为了便于回调，把当前的 jquery对象集存入本次 XHR
            XHR.selfDom = $(item);
            XHR.selfData = 'here is my self defined data';
        },
        success     : function(data, code, jqXHR){
            // jqXHR is a superset of the browser's native XHR object
            var $item = jqXHR.selfDom;
            var selfdata = jqXHR.selfData;
            $item.html( selfdata );
            ...
        } 
    });
});

    조금 더 많은 코드를 그냥 쓰기보다는 모든 시간을 쓸 필요 :이 두 가지 솔루션을 볼 수 있듯이 있다는 단점이있다 :

    $.get/post (url, data, successHandler);

    더 읽기 약 $ 아약스 : http://api.jquery.com/jquery.ajax/

  11. 11.사람이 아직 여기 오면이 내 걸릴 수 있습니다 :

    사람이 아직 여기 오면이 내 걸릴 수 있습니다 :

    $('.selector').click(myCallbackFunction.bind({var1: 'hello', var2: 'world'}));

function myCallbackFunction(event) {
    var passedArg1 = this.var1,
        passedArg2 = this.var2
}

    여기에 무슨 일이 콜백 함수에 바인딩 한 후,이 같은 함수 내에서 사용할 수 있습니다.

    이 아이디어는 사용을 바인드 기능을 어떻게 반응에서 비롯됩니다.

  12. 12.

    $(document).on('click','[action=register]',function(){
    registerSocket(registerJSON(),registerDone,second($(this)));
});

function registerSocket(dataFn,doneFn,second){
                 $.ajax({
                       type:'POST',
                       url: "http://localhost:8080/store/public/register",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       data:dataFn
                 }).done ([doneFn,second])
                   .fail(function(err){
                            console.log("AJAX failed: " + JSON.stringify(err, null, 2));
                        });
}

function registerDone(data){
    console.log(JSON.stringify(data));
}
function second(element){
    console.log(element);
}

    중등 방법 :

    function socketWithParam(url,dataFn,doneFn,param){
  $.ajax({
    type:'POST',
    url:url,
    contentType: "application/json; charset=utf-8",
    headers: { 'Authorization': 'Bearer '+localStorage.getItem('jwt')},
    data:dataFn
    }).done(function(data){
      doneFn(data,param);
    })
    .fail(function(err,status,xhr){
    console.log("AJAX failed: " + JSON.stringify(err, null, 2));
    });
}

$(document).on('click','[order-btn]',function(){
  socketWithParam(url,fakeDataFn(),orderDetailDone,secondParam);
});

function orderDetailDone(data,param){
  -- to do something --
}

  13. 13.실제로, 당신의 코드는 쓸 때 때문에 작동하지 않습니다 :

    실제로, 당신의 코드는 쓸 때 때문에 작동하지 않습니다 :

    $.post("someurl.php",someData,doSomething(data, myDiv),"json");

    당신은 세 번째 매개 변수가 아닌 함수 참조로 함수 호출을 배치합니다.

  14. 14.B01의 대답에 부록으로, $ .proxy의 두 번째 인수는 종종이 참조를 유지하는 데 사용됩니다. .proxy 달러 전달 추가 인수 부분적 기능에 적용되는 데이터로 미리 충전. 해봐요는 인수 목록의 마지막에 사람들이 있어야합니다 수 있도록 콜백 인수 $ .post 패스가, 마지막에 적용됩니다 참고 :

    B01의 대답에 부록으로, $ .proxy의 두 번째 인수는 종종이 참조를 유지하는 데 사용됩니다. .proxy 달러 전달 추가 인수 부분적 기능에 적용되는 데이터로 미리 충전. 해봐요는 인수 목록의 마지막에 사람들이 있어야합니다 수 있도록 콜백 인수 $ .post 패스가, 마지막에 적용됩니다 참고 :

    function clicked() {
    var myDiv = $("#my-div");
    var callback = $.proxy(doSomething, this, myDiv);
    $.post("someurl.php",someData,callback,"json"); 
}

function doSomething(curDiv, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

    이 방법은 여러 인자가 콜백에 바인딩 할 수 있습니다 :

    function clicked() {
    var myDiv = $("#my-div");
    var mySpan = $("#my-span");
    var isActive = true;
    var callback = $.proxy(doSomething, this, myDiv, mySpan, isActive);
    $.post("someurl.php",someData,callback,"json"); 
}

function doSomething(curDiv, curSpan, curIsActive, curData) {
    //"this" still refers to the same "this" as clicked()
    var serverResponse = curData;
}

    15. from https://stackoverflow.com/questions/939032/jquery-pass-more-parameters-into-callback by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를하고 CSS를 사용하여 성급 디스플레이에 숫자를 돌려  (0) 2020.10.20
[JQUERY] 어떻게 jQuery를 사용하여 특정 항목으로 이동합니다?  (0) 2020.10.20
[JQUERY] JQuery와 양식에 방지 페이지로드는 없음 표시 버튼으로 제출  (0) 2020.10.20
[JQUERY] 어떻게 사용하지 않으려면 / 자바 스크립트에서 JSF 입력 필드를 사용 하시겠습니까?  (0) 2020.10.20
[JQUERY] 다른 iFrame을에서 iframe이 내용을 삭제하는 방법  (0) 2020.10.20
,

티스토리툴바