是否有一种方法可以在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调用返回的结果。
当前回答
实际上，你的代码不能工作，因为当你写:
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
将函数调用作为第三个形参而不是函数引用。
其他回答
实际上，你的代码不能工作，因为当你写:
$.post("someurl.php",someData,doSomething(data, myDiv),"json");
将函数调用作为第三个形参而不是函数引用。
实际上，这比大家说的要简单得多……特别是当你使用$.ajax({})基本语法和一个helper函数时。
只要传入key: value对，就像你对任何对象一样，当你设置你的ajax请求…(因为$(this)还没有改变上下文，它仍然是上面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>
这比设置var更好的一个原因是，var是全局的，因此，是可重写的…如果有两个东西可以触发ajax调用，理论上可以比ajax调用响应更快地触发它们，并且可以将第二个调用的值传递给第一个调用。使用上面的这个方法，就不会发生这种情况(而且使用起来也很简单)。
我在上一篇帖子中犯了一个错误。这是一个如何在回调函数中传递额外参数的工作示例:
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() 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解决方案有点太混乱了。
虽然我发现，你可以很容易地传递尽可能多的参数，因为你想每个ajax回调使用jquery。
这里有两个更简单的解决方案。
第一个，@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对象中来传递这些数据 它存在于整个ajax请求-响应生命周期中。
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/
