jQuery将更多参数传递给回调

Question

有没有办法将更多数据传递给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调用返回的结果.

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

至于你的具体例子,我没有.post在jQuery中使用该函数,但是对文档的快速扫描表明回调应该是具有以下签名的函数指针:

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'对象,具体取决于您的个人偏好/编码标准.

Answer 2

使用时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) {
    ...
}

在匿名函数代码中,您可以使用封闭范围中定义的变量.这是Javascript作用域的工作方式.

Answer 3

它实际上比每个人都更容易听起来更容易......特别是如果你使用$.ajax({})基本语法与其中一个辅助函数.

key: value当您设置ajax请求时,就像在任何对象上一样传入对... (因为$(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是全局的,因此是可覆盖的...如果你有2个可以触发ajax调用的东西,理论上你可以比ajax调用响应更快地触发它们,你有第二个调用传递给第一个调用的值.使用上面的方法,这不会发生(并且使用它也很简单).

Answer 4

在今天的世界中,还有另一个更清晰的答案,并取自另一个Stack Overflow答案:

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如何？将附加参数传递给$ .ajax调用的成功回调？

Answer 5

您还可以尝试以下内容:

function clicked() {

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

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

function doSomething(curData, curDiv) {

}

Answer 6

您可以使用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");