jQuery geri çağrı içine daha fazla parametre geçmek

JQuery geri arama işlevine daha fazla veri geçirmek için bir yolu var mı?

İki fonksiyonum var ve $.postörneğin AJAX çağrısının hem elde edilen verilerini hem de birkaç özel argümanı iletmek için geri çağırma istiyorum

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 çağrısından döndürülen sonucun yanı sıra kendi parametrelerimi geri aramaya da iletmek istiyorum.

Çözüm, değişkenlerin kapanma yoluyla bağlanmasıdır.

Daha temel bir örnek olarak, burada bir geri arama işlevi alan ve çağıran bir örnek işlevin yanı sıra örnek bir geri arama işlevi verilmiştir:

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

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

Bu geri çağrıyı çağırır ve tek bir argüman sağlar. Şimdi ek bir argüman sunmak istersiniz, böylece geri aramayı kapatırsınız.

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

Veya daha basit bir şekilde ES6 Ok Fonksiyonlarını kullanarak :

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

Özel örneğinize gelince, .postişlevi jQuery'de kullanmadım, ancak belgelerin hızlı bir şekilde taranması, geri aramanın aşağıdaki imzalı bir işlev işaretçisi olması gerektiğini gösteriyor :

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

Bu nedenle çözümün şöyle olduğunu düşünüyorum:

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

Ne oluyor?

Son satırında, doSomething(extraStuff)bir çağrılan ve çağırma sonucu meydana gelir işlev işaretçisi .

Çünkü extraStuffbir argüman olarak geçilirse fonksiyonun doSomethingkapsamı içindedir doSomething.

Geri extraStuffdöndürülen anonim iç işlevinde ne zaman başvurulursa doSomething, dış işlevin extraStuffbağımsız değişkenine kapanarak bağlanır . Bu, doSomethinggeri döndükten sonra bile geçerlidir .

Yukarıdakileri test etmedim, ancak son 24 saat içinde çok benzer bir kod yazdım ve tarif ettiğim gibi çalışıyor.

Kişisel tercihinize / kodlama standartlarınıza bağlı olarak tek bir 'extraStuff' nesnesi yerine elbette birden fazla değişkeni iletebilirsiniz.

Kullanırken doSomething(data, myDiv), aslında işlevi çağırır ve ona bir başvuru yapmazsınız.

doStomethingİşlevi doğrudan iletebilirsiniz, ancak doğru imzaya sahip olduğundan emin olmalısınız.

DoSomething ürününü olduğu gibi tutmak istiyorsanız, çağrısını anonim bir işlevle sarabilirsiniz.

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

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

Anonim işlev kodunun içinde, ekteki kapsamda tanımlanan değişkenleri kullanabilirsiniz. Javascript kapsam belirleme yöntemi bu şekilde çalışır.

Aslında herkesin ses çıkarmasından daha kolaydır ... özellikle $.ajax({})de yardımcı sözdizimine karşı temel sözdizimini kullanırsanız .

Sadece geçmek key: value, herhangi bir nesneye yaptığınız gibi ayarlayabileceğiniz ajax isteği ... ne zaman, çifti (çünkü $(this)henüz bağlamı değişmedi, hala yukarıdaki bağlama çağrısı için bir tetik)

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

Bunun var ayarını yapmaktan daha iyi olmasının nedenlerinden biri var değişkeninin küresel olması ve bu nedenle üzerine yazılabilir olmasıdır ... ajax çağrılarını tetikleyebilecek 2 şeyiniz varsa, teorik olarak bunları ajax çağrısının yanıt verdiğinden daha hızlı tetikleyebilirsiniz ve birincisine yapılan ikinci çağrı için değere sahip olursunuz. Yukarıda bu yöntemi kullanmak bu olmazdı (ve kullanımı da oldukça basit).

Bugünün dünyasında daha temiz olan ve başka bir Stack Overflow cevabından alınan başka bir cevap var:

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

İşte orijinal soru ve cevap: jQuery NASIL YAPILIR ?? $ .ajax çağrısı için başarılı geri aramaya ek parametreler iletilsin mi?

Ayrıca aşağıdakine benzer bir şey deneyebilirsiniz:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

JavaScript'in bir kapanışını kullanabilirsiniz:

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

ve ne zaman yapabileceğiniz:

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

Son gönderimde bir hata yaptım. Bu, geri çağrı işlevinde ek bağımsız değişkenin nasıl iletileceğine dair çalışan bir örnektir:

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

Hadi basit olalım! :)

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

.ajax()JQuery API ve kapanışlarını kullanarak zamanuyumsuz istekleri göndermek için daha genel bir çözüm ve geri çağrı işlevine ek parametreler iletmek için:

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

Benim için ve Javascript ile yeni iletişim kuran diğer yeni başlayanlar
için Closeure Solution, bunun biraz kafa karıştırıcı olduğunu düşünüyorum .

Bunu bulduğumda, jquery kullanarak her ajax geri aramasına istediğiniz kadar parametre kolayca iletebilirsiniz.

İşte iki kolay çözüm .

Birincisi, @zeroasterisk'in yukarıda bahsettiği örnek:

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

İkincisi XHR object , tüm ajax-istek-yanıt ömrü boyunca mevcut olanlara ekleyerek kendi tanımladığınız verileri geçirin .

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

Gördüğünüz gibi bu iki çözümün bir dezavantajı var: her seferinde yazmaktan biraz daha fazla kod yazmanız gerekiyor:

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

$ .Ajax hakkında daha fazla bilgi edinin: http://api.jquery.com/jquery.ajax/

Birisi hala buraya geliyorsa, bu benim görüşüm:

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

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

Burada ne olur, geri çağırma işlevine bağlandıktan sonra, işlev içinde kullanılabilir this.

Bu fikir React'in bindişlevselliği nasıl kullandığıyla ilgilidir .

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

İkincil yol:

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

aslında, kodunuz çalışmıyor çünkü yazarken:

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

bir işlev çağrısını işlev başvurusu yerine üçüncü parametre olarak yerleştirirsiniz .

B01'in cevabına bir ek olarak , ikinci argümanı $.proxygenellikle thisreferansı korumak için kullanılır . İletilen ek argümanlar $.proxyişleve kısmen uygulanır ve verilerle önceden doldurulur. $.postGeri aramaya iletilen tüm bağımsız değişkenlerin sonunda uygulanacağını, bu nedenle doSomethingbağımsız değişken listesinin sonunda olması gerektiğini unutmayın:

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

Bu yaklaşım, birden çok bağımsız değişkenin geri aramaya bağlanmasına da izin verir:

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