有没有办法将更多数据传递到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"
对于您的特定示例,我没有.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
在返回的匿名内部函数中引用了when ,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) {
...
}
在匿名函数代码内部,您可以使用封闭范围中定义的变量。这就是Javascript作用域的工作方式。
实际上,它比每个人都听起来容易得多……尤其是如果您使用$.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调用响应更快地触发它们,并且您将把第二个呼叫的值传递给第一个。在上面使用这种方法不会发生(而且使用起来也很简单)。
在当今世界,还有另一个更干净的答案,该答案取自另一个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 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;
}
让我们变得简单!:)
$.ajax({
url: myUrl,
context: $this, // $this == Current $element
success: function(data) {
$.proxy(publicMethods.update, this)(data); // this == Current $element
}
});
使用.ajax()
jQuery API和闭包将异步参数传递给回调函数的更通用的解决方案:
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);
});
};
对于我和刚接触过Javascript的其他新手来说,
我认为Closeure Solution
有点太混乱了。
虽然我发现了这一点,但是您可以使用jquery轻松地将所需数量的参数传递给每个ajax回调。
这是两个更简单的解决方案。
@zeroasterisk在上面提到的第一个示例:
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 );
...
}
});
});
第二,通过将自定义数据添加到XHR object
整个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 );
...
}
});
});
如您所见,这两种解决方案都有一个缺点:与每次编写相比,您每次都需要编写更多的代码:
$.get/post (url, data, successHandler);
了解有关$ .ajax的更多信息:http : //api.jquery.com/jquery.ajax/
如果有人仍然来这里,这是我的看法:
$('.selector').click(myCallbackFunction.bind({var1: 'hello', var2: 'world'}));
function myCallbackFunction(event) {
var passedArg1 = this.var1,
passedArg2 = this.var2
}
绑定到回调函数后,此处将发生什么,它将在函数中以形式提供this
。
这个想法来自React如何使用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);
}
次要方式:
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 --
}
实际上,您的代码无法正常工作,因为您在编写时:
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
您将函数调用作为第三个参数而不是函数引用。
作为b01答案的附录,$.proxy
通常使用的第二个参数来保留this
引用。传递给的其他参数$.proxy
部分应用于函数,并用数据预填充。请注意,$.post
传递给回调函数的所有参数都将在末尾应用,因此doSomething
应将其放在其参数列表的末尾:
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;
}
这种方法还允许将多个参数绑定到回调:
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;
}
文章标签:arguments , callback , function , javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!