jQuery는 더 많은 매개 변수를 콜백에 전달

jQuery에서 더 많은 데이터를 콜백 함수에 전달하는 방법이 있습니까?

나는 두 개의 함수를 가지고 있으며 $.post, 예를 들어 AJAX 호출의 결과 데이터와 몇 가지 사용자 정의 인수를 모두 전달하기 위해 콜백을 원합니다.

function clicked() {
    var myDiv = $("#my-div");
    // ERROR: Says data not defined
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
    // ERROR: Would pass in myDiv as curData (wrong)
    $.post("someurl.php",someData,doSomething(data, myDiv),"json"); 
}

function doSomething(curData, curDiv) {

}

AJAX 호출에서 반환 된 결과뿐만 아니라 자체 매개 변수를 콜백에 전달할 수 있기를 원합니다.

해결책은 클로저를 통한 변수 바인딩입니다.

보다 기본적인 예로, 콜백 함수와 콜백 함수를 수신하고 호출하는 함수 예는 다음과 같습니다.

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"

귀하의 특정 예에 관해서는, .postjQuery 에서 함수를 사용하지 않았지만 설명서를 빠르게 스캔하면 콜백 이 다음 서명 이있는 함수 포인터 여야한다고 제안합니다 .

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

무슨 일이야?

마지막 줄에서 doSomething(extraStuff)됩니다 호출 하고 호출의 결과는 인 함수 포인터 .

extraStuff인수로 전달 되므로 함수 doSomething범위 내에 doSomething있습니다.

extraStuff반환 된 익명의 내부 함수에서 참조 되면 doSomething외부 함수의 extraStuff인수 에 대한 클로저로 바인딩됩니다 . doSomething돌아온 후에도 마찬가지 입니다.

위의 테스트를 수행하지는 않았지만 지난 24 시간 동안 매우 유사한 코드를 작성했으며 설명한대로 작동합니다.

물론 개인 취향 / 코딩 표준에 따라 단일 'extraStuff'객체 대신 여러 변수를 전달할 수 있습니다.

를 사용할 때 doSomething(data, myDiv)실제로 함수를 호출하고 참조하지 않습니다.

doStomething함수를 직접 전달할 수 있지만 올바른 서명이 있는지 확인해야합니다.

doSomething을 그대로 유지하려면 익명 함수로 호출을 래핑 할 수 있습니다.

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

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

익명 함수 코드 내에서 엔 클로징 범위에 정의 된 변수를 사용할 수 있습니다. 이것이 자바 스크립트 범위 지정 방식입니다.

실제로 모든 사람이 소리를내는 것보다 쉽습니다. 특히 $.ajax({})기본 구문과 도우미 함수 중 하나 를 사용하는 경우 특히 그렇습니다 .

key: value아약스 요청을 설정할 때 어떤 객체에서와 같이 쌍을 전달 하면됩니다 ( $(this)아직 컨텍스트가 변경되지 않았기 때문에 여전히 위의 바인드 호출에 대한 트리거입니다)

<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를 설정하는 것보다 좋은 이유 중 하나는 var가 전역 적이며 덮어 쓸 수 있기 때문입니다 ... 아약스 호출을 트리거 할 수있는 두 가지가 있다면 이론적으로 ajax 호출 응답보다 빠르게 트리거 할 수 있습니다. 두 번째 통화의 값이 첫 번째 통화로 전달됩니다. 위의이 방법을 사용하면 발생하지 않습니다 (사용하기도 매우 간단합니다).

오늘날의 세상에는 더 깔끔하고 또 다른 스택 오버플로 답변에서 가져온 또 다른 답변이 있습니다.

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 ?? $ .ajax 호출에 대한 추가 매개 변수를 성공 콜백에 전달합니까?

다음과 같은 것을 시도해 볼 수도 있습니다.

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

JavaScript를 닫을 수 있습니다.

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

마지막 게시물에서 실수를했습니다. 다음은 콜백 함수에서 추가 인수를 전달하는 방법에 대한 실제 예입니다.

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

간단하게 갑시다! :)

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

.ajax()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);
     });
};

나, 그냥 자바 스크립트와 접촉 한 다른 초보자의 경우,
나는이 생각 Closeure Solution이 너무 혼란의 작은 종류이다.

내가 찾은 동안 jquery를 사용하여 모든 ajax 콜백에 원하는만큼 많은 매개 변수를 전달할 수 있습니다.

다음은 더 쉬운 두 가지 솔루션 입니다.

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

두 번째 XHR object 는 전체 Ajax-request-response 수명에 존재하는 데이터를 추가하여 자체 정의 데이터를 전달하는 것 입니다.

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

$ .ajax에 대해서 더 읽어보세요 : http://api.jquery.com/jquery.ajax/

누군가가 여전히 여기 온다면, 이것은 나의 테이크입니다 :

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

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

콜백 함수에 바인딩 한 후 여기서 발생하는 것은 함수 내에서로 사용할 수 있습니다 this.

이 아이디어는 React가 bind기능을 사용하는 방법에서 나옵니다 .

$(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 --
}

실제로 코드를 작성할 때 코드가 작동하지 않습니다.

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

함수 참조 대신 함수 호출 을 세 번째 매개 변수로 배치합니다 .

b01의 답변에 대한 부록으로 두 번째 인수 $.proxy는 종종 this참조 를 유지하는 데 사용됩니다 . 전달 된 추가 인수 $.proxy는 함수에 부분적으로 적용되어 데이터로 미리 채워집니다. $.post콜백에 전달 되는 모든 인수 는 끝에 적용되므로 doSomething인수 목록 끝에 인수가 있어야합니다.

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