jQuery는 더 많은 매개 변수를 콜백에 전달 있습니까? 나는 두 개의 함수를 가지고 있으며 $.post,

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