有没有办法将更多数据传递给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调用返回的结果 .
14 回答
解决方案是通过闭包绑定变量 .
作为一个更基本的例子,这里是一个接收和调用回调函数的示例函数,以及一个示例回调函数:
这会调用回调并提供单个参数 . 现在你想提供一个额外的参数,所以你将回调包装在闭包中 .
或者,更简单地使用ES6 Arrow Functions:
至于你的具体例子,我没有在jQuery中使用
.post
函数,但快速扫描文档表明回调应该是一个带有以下签名的函数指针:因此我认为解决方案如下:
怎么了?
在最后一行中,调用
doSomething(extraStuff)
,并且该调用的结果是函数指针 .因为
extraStuff
作为参数传递给doSomething
,所以它在doSomething
函数的范围内 .当
extraStuff
在返回的匿名内部函数doSomething
中被引用时,它被闭包绑定到外部函数的extraStuff
参数 . 即使在doSomething
返回后也是如此 .我没有对上面的内容进行测试,但是我在过去的24小时内编写了非常相似的代码,它的工作原理正如我所描述的那样 .
您当然可以传递多个变量而不是单个'extraStuff'对象,具体取决于您的个人偏好/编码标准 .
使用
doSomething(data, myDiv)
时,实际上是调用该函数而不是对它进行引用 .您可以直接传递
doStomething
函数,但必须确保它具有正确的签名 .如果你想按照它的方式保持doSomething,你可以将它的调用包装在一个匿名函数中 .
在匿名函数代码中,您可以使用封闭范围中定义的变量 . 这是Javascript作用域的工作方式 .
它's actually easier than everyone' s使它听起来......特别是如果你使用
$.ajax({})
基本语法与其中一个辅助函数 .只需传入
key: value
对就像在任何对象上一样,当您设置ajax请求时...(因为$(this)
还没有't changed context yet, it'仍然是上面绑定调用的触发器)这比设置var更好的原因之一是var是全局的,因此是可覆盖的...如果你有2个可以触发ajax调用的东西,理论上你可以比ajax调用响应更快地触发它们,你有第二个调用传递给第一个调用的值 . 使用上面的方法,这不会发生(并且使用它也很简单) .
在今天的世界中,还有另一个更清晰的答案,并取自另一个Stack Overflow答案:
这是原始的问题和答案:jQuery HOW TO?? pass additional parameters to success callback for $.ajax call?
您还可以尝试以下内容:
您可以使用JavaScript的闭包:
当你能做到:
我在上一篇文章中犯了一个错误 . 这是如何在回调函数中传递其他参数的工作示例:
我们走吧! :)
使用.ajax() jQuery API发送异步请求以及将其他参数传递给回调函数的闭包的更通用的解决方案:
对于我和其他刚接触过Javascript的新手,
我认为
Closeure Solution
有点太混乱了 .虽然我发现了这一点,但您可以使用jquery轻松地将所有参数传递给每个ajax回调 .
这是 two easier solutions .
第一个,上面提到了 @zeroasterisk ,例如:
第二个,通过将自定义数据添加到整个ajax-request-response生命周期中存在的
XHR object
中来传递自定义数据 .正如您所看到的,这两个解决方案的缺点是:您每次都需要编写更多代码而不仅仅是编写代码:
阅读更多关于$ .ajax的信息:http://api.jquery.com/jquery.ajax/
如果有人还来这里,这是我的看法:
这里发生了什么,绑定到回调函数后,它将在其中可用功能为
this
.这个想法来自React如何使用
bind
功能 .次要方式:
实际上,你的代码不起作用,因为当你写:
您将函数调用作为第三个参数而不是函数引用 .
作为b01's answer的附录,
$.proxy
的第二个参数通常用于保留this
参考 . 传递给$.proxy
的其他参数部分应用于函数,预填充数据 . 请注意,传递给回调的任何参数$.post
将在末尾应用,因此doSomething
应该包含在其参数列表末尾的那些参数:此方法还允许将多个参数绑定到回调: