jQuery przekazuje więcej parametrów do funkcji callback

Podczas używania doSomething(data, myDiv), wywołujesz funkcję i nie odwołujesz się do niej.

Możesz przekazać funkcję doStomething bezpośrednio, ale musisz upewnić się, że ma prawidłowy podpis.

Jeśli chcesz zachować doSomething tak jak jest, możesz zawinąć jego wywołanie w funkcję anonimową.

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

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

Wewnątrz kodu funkcji anonimowej można użyć zmiennych zdefiniowanych w obszarze załączającym. Tak działa JavaScript scoping.

To łatwiejsze niż wszyscy mówią... zwłaszcza jeśli używasz składni bazowej $.ajax({}) vs. jednej z funkcji pomocniczych.

Po prostu podaj parę key: value, tak jak na dowolnym obiekcie, podczas konfigurowania żądania ajax... (ponieważ $(this) nie zmienił jeszcze kontekstu, nadal jest wyzwalaczem powyższego wywołania bind)

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

Jednym z powodów, dla których jest to lepsze niż ustawienie var, jest to, że var jest globalny i jako taki, nadpisywalny... jeśli masz 2 rzeczy które mogą wyzwalać połączenia ajax, teoretycznie można wyzwalać je szybciej niż połączenia ajax odpowiada, a wartość dla drugiego połączenia przekazywana jest do pierwszego. Korzystanie z tej metody, powyżej, że nie stanie się (i to jest dość proste w użyciu zbyt).

W dzisiejszym świecie istnieje inna odpowiedź, która jest czystsza, a wzięta z innej odpowiedzi przepełnienia stosu:

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

Oto oryginalne pytanie i odpowiedź: jQuery jak?? przekaż dodatkowe parametry do wywołania zwrotnego sukcesu za $.połączenie z Ajaxem?

Możesz również spróbować czegoś takiego:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

Możesz użyć zamknięcia JavaScript:

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

I kiedy możesz zrobić:

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

Popełniłem błąd w ostatnim poście. To jest przykład pracy, jak przekazać dodatkowy argument w funkcji callback:

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

Let ' s go simple ! :)

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

Bardziej ogólne rozwiązanie do wysyłania asynchronicznych żądań za pomocą .ajax() jQuery API i zamknięcia, aby przekazać dodatkowe parametry do funkcji callback:

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

Dla mnie i innych początkujących, którzy właśnie skontaktowali się z Javascript,
Myślę, że Closeure Solution jest trochę zbyt mylące.

Podczas gdy znalazłem, że, można łatwo przekazać tyle parametrów, ile chcesz do każdego wywołania zwrotnego ajax za pomocą jquery.

Oto dwa łatwiejsze rozwiązania.

Pierwszy, który @ zeroasterisk wspomniał powyżej, przykład:

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

Drugi, podaj zdefiniowane przez siebie dane, dodając je do XHR object która istnieje w cały czas życia 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 );
            ...
        } 
    });
});

Jak widać te dwa rozwiązania mają wadę: za każdym razem trzeba napisać trochę więcej kodu niż tylko napisać:

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

Czytaj więcej o $.ajax: http://api.jquery.com/jquery.ajax/

Jeśli ktoś jeszcze tu przyjdzie, to jest to moje zdanie:

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

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

Co się tutaj dzieje, po powiązaniu z funkcją callback, będzie ona dostępna w ramach funkcji jako this.

Ten pomysł pochodzi z tego, jak React używa funkcjonalności 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);
}

Droga Drugorzędna:

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

Właściwie Twój kod nie działa, ponieważ kiedy piszesz:

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

Jako trzeci parametr umieszczasz wywołanie funkcji, a nie odwołanie do funkcji.

Jako dodatek do odpowiedzi B01 , drugi argument $.proxy jest często używany do zachowania odniesienia this. Dodatkowe argumenty przekazane do $.proxy są częściowo stosowane do funkcji, wstępnie wypełniając ją danymi. Zauważ, że wszelkie argumenty $.post przekazane do wywołania zwrotnego zostaną zastosowane na końcu, więc doSomething powinny mieć te na końcu listy argumentów:

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

To podejście pozwala również na powiązanie wielu argumentów z wywołaniem zwrotnym:

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