Question

我遇到了一些我正在处理的代码问题。我有一个从几个点使用的泛型函数（ajaxContent）。我需要的是在AJAX调用完成后运行一个函数，但我需要传递一些我调用之前的数据（所以不是从AJAX调用返回的数据。

function ajaxContent(url, id, target, data, callbackFunction) {

  $.ajax({
    async : true,
    ....    
    complete: function(){
      if(typeof callbackFunction == "function"){
        callbackFunction(); // function get's executed here, lead_id is not available
      }
    }
  });
}    

$(document).on("click", "#something", function(){
  var leaf_id = $(this).attr('rel');

  ajaxContent(url, id, target, data, function(leaf_id){

    url = "/path/" + leaf_id;
    window.location = url;

  })
})

$(document).on("click", "#action", function() {

    ajaxContent(url, id, target, data, function(){

        if ($(this).attr('rel') == "M_0") // $(this).attr('rel') not available here, so need to pass through some way
            $('#treedata').css('background', 'url(/img/rotonde.png) 50% 50% no-repeat');
  });

});

我或许可以使用像

这样的东西

function ajaxContent(url, id, target, data, callbackFunction, varA, varB, varC, varD) { 
   callbackFunction(varA, varB, varC, varD);
}

带

ajaxContent(url, id, target, data, function(varA){
}, varA, varB, varC, varD)`

但不是真正的可扩展性。

我希望这很清楚： - ）

Answer 1

leaf_id未定义，因为在调用callbackFunction();时您没有传递任何参数。

你可以通过回调传递变量，但是你需要一直传递它，这里是你编写代码以使leaf_id传递的方式：

function ajaxContent(url, id, target, data, callbackFunction, leaf_id) {
    $.ajax({
        async : true,
    ....        
        complete: function(){
          if(typeof callbackFunction == "function"){
            callbackFunction(leaf_id);
          }
        }
    });
}

ajaxContent(url, id, target, data, function(leaf_id){
    url = "/path/" + leaf_id;
    window.location = url;
}, $(this).attr('rel'));

http://jsfiddle.net/qaWNp/2/

Answer 2

在您现在的答案中，leaf_id是document.ready()处理函数中的局部变量。因此，在该背景之外不可用。

你有几种方法可以解决这个问题：

您可以在document.ready()处理程序函数中移动ajaxContent函数的定义，以便它能够看到leaf_id。
您可以将leaf_id设为全局变量，以便可以从任何地方访问它。
您可以将leaf_id作为函数参数传递给ajaxContent。

如果没有关于您正在做什么的更多背景信息，并且因为这是一个仅与特定操作相关联的瞬态值，我认为最佳选择是＃3：

function ajaxContent(url, id, target, data, leafID, callbackFunction) {

    $.ajax({
        async : true,
    ....        
        complete: function(){
          if(typeof callbackFunction == "function"){
            // you can access any of the ajaxContent function arguments here
            callbackFunction(leafID);
          }
        }
    });
}       

$(document).on("click", "#something", function(){
  var leaf_id = $(this).attr('rel');

  ajaxContent(url, id, target, data, leaf_id, function(leafID){

    url = "/path/" + leafID;
    window.location = url;

  })
})

或者，如果要传递大量变量，可以创建一个空对象，然后将每个变量作为属性放在该对象上，然后将单个对象传递给ajaxContent并传入回调，如下所示：

function ajaxContent(url, id, target, data, settings, callbackFunction) {

    $.ajax({
        async : true,
    ....        
        complete: function(){
          if(typeof callbackFunction == "function"){
            // you can access any of the ajaxContent function arguments here
            callbackFunction(settings);
          }
        }
    });
}       

$(document).on("click", "#something", function(){
  var args = {};
  args.leafID = $(this).attr('rel');

  ajaxContent(url, id, target, data, args, function(settings){

    // access args.leafID here
    url = "/path/" + leafID;
    window.location = url;

  })
})

注意，在我的代码示例中，我将参数命名为与其他变量不同，以避免混淆哪个是哪个。

在进行异步AJAX调用并传递变量后运行函数

2 个答案: