jQuery AJAX 自定义函数和自定义回调？答案

【问题标题】：jQuery AJAX custom function and custom callback?jQuery AJAX 自定义函数和自定义回调？
【发布时间】：2012-10-10 13:58:48
【问题描述】：

大家好！

我有一个像这样的ajax() 电话：

$.ajax({
  type: "post",
  url: "whatever.php",
  data: {
    theData: "moo moo"
  },
  success: function(data) {
    console.log(data);
  }
});

是否可以将其包装在自定义函数中但保留回调？
比如：

function customAjax(u, d, theCallbackStuff) {
  $.ajax({
    type: "post",
    url: u,
    data: d,
    success: function(data) {
      //RUN theCallbackStuff
    }
  });
}

theCallbackStuff 将类似于：

var m = 1;
var n = 2;
alert(m + n + data);

【问题讨论】：

你试过了吗？我想这是可能的
那么，我可以在theCallbackStuff 中保存一个完整的函数吗？
我现在正在工作，所以我无法尝试 - 我在脑子里胡思乱想 ;)

标签： javascript jquery ajax jquery-callback

【解决方案1】：

编辑：

最近有人对此表示赞同，我不得不声明我不会再这样做了。 $.ajax 返回一个 promise，所以你可以直接使用 Promise 以更加一致和稳健的方式完成我刚刚在此处所做的工作。

function customRequest(u,d) {
   var promise = $.ajax({
     type: 'post',
     data: d,
     url: u
   })
   .done(function (responseData, status, xhr) {
       // preconfigured logic for success
   })
   .fail(function (xhr, status, err) {
      //predetermined logic for unsuccessful request
   });

   return promise;
}

那么用法如下：

// using `done` which will add the callback to the stack 
// to be run when the promise is resolved
customRequest('whatever.php', {'somekey': 'somevalue'}).done(function (data) {
   var n = 1,
       m = 2;

   alert(m + n + data);
});

// using fail which will add the callback to the stack 
// to be run when the promise is rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).fail(function (xhr, status, err) {
   console.log(status, err);
});

// using then which will add callabcks to the 
// success AND failure stacks respectively when 
// the request is resolved/rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).then(
  function (data) {
     var n = 1,
         m = 2;

     alert(m + n + data);
  },
  function (xhr, status, err) {
     console.log(status, err);
  });

当然，我一直都这样做。您可以在实际成功回调中执行回调，也可以将回调分配为成功回调：

function customRequest(u,d,callback) {
   $.ajax({
     type: "post",
     url: u,
     data:d,
     success: function(data) {
        console.log(data); // predefined logic if any

        if(typeof callback == 'function') {
           callback(data);
        }
     }
  });
}

用法如下所示：

customRequest('whatever.php', {'somekey': 'somevalue'}, function (data) {
   var n = 1,
       m = 2;

   alert(m + n + data);
});

【讨论】：

这正是我要找的——虽然它不应该是=== 吗？
你可以做===，但在这种情况下它并不重要，因为typeof的结果将是一个字符串。
我一整天看到的最佳编辑。非常感谢，...这是要走的路。

【解决方案2】：

    function customAjax(u, d, theCallbackStuff) {
      $.ajax({
        type: "post",
        url: u,
        data: d,
        success: theCallbackStuff 
      });
    }

customAjax(url, data, function(data){
//do something
});

【讨论】：

我会确保您使用以下方法检查函数是否存在：if(window.some_function_name_here) 或 if( typeof funcname == 'function' )

【解决方案3】：

在此注释中，您可以将完整函数作为回调传递给 this：

function customRequest(u,d,callback) {
   $.ajax({
     type: "post",
     url: u,
     data:d,
     success: function(data) {
        console.log(data); // predefined logic if any

        if(typeof callback == 'function') {
           callback(data);
        }
     }
  });
}



// Then call it as follows:

function initiator() {

    customRequest( '/url/to/post', 'param1=val', function() { alert( 'complete' ); })

}

简单地将它作为匿名函数传递也可以。只是为了展示:)

【讨论】：