jquery - 编写具有覆盖成功处理能力的通用 $.ajax() 函数

Question

上下文是：我在整个地方都在进行 ajax 调用以处理我网站上的表单，但一般来说，他们正在做同样的事情并显示类似的反馈。所以我计划编写一个函数来进行验证和 ajax 调用，然后将其绑定到我网站上的所有表单（具有某个类）。

做到了。效果很好。

除了......在那些我想做一些稍微不同的成功的情况下。

有没有一种优雅的方法可以保留该功能，但在需要时逐个表格覆盖它？这只是我想改变的成功处理。

Answer 1

Yes. Supply a callback to your ajax call. In your success handler, call this callback.

function newAjax(successCallback, errorCallback) {
  $.ajax({
    url: ...,
    success: successCallback(),
    error: errorCallback()
  });
}

I'd also advise you to check for existence of the callbacks first, so that no error is thrown up when you don't supply both callbacks. Of course, feel free to extend it anyhow you like.

function newAjax(successCallback, errorCallback) {
  $.ajax({
    url: ...,
    success: function() { 
      if (typeof successCallback === "function") {
       successCallback()
      }
    },
    error: function() {
      if (typeof errorCallback === "function") {
       errorCallback()
      }
    }
  });
}

Answer 2

您可以使用ajaxSuccess处理程序。

说明：附加一个在 Ajax 请求成功完成时执行的函数

该文档还提供了一个关于如何区分请求的示例：

$( document ).ajaxSuccess(function( event, xhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSuccess handler. The ajax response was: " +
      xhr.responseText );
  }
});

Answer 3

我认为您也可以利用 ajaxSetup 功能。您可以使用它为 ajax 调用设置默认值，然后您只需更改成功回调。

http://api.jquery.com/jQuery.ajaxSetup/

Answer 4

我能想到的最简单的解决方案是：

在表单元素的属性中为表单指定自定义回调函数。现在从通用回调函数中，检查是否为当前表单指定了特定的回调。如果是，则使用响应作为参数调用它。

<form class="ajax-form" action="some/path" data-submit-callback="loginFormCallback">
</form>

//绑定普通回调

$(document).on('submit', '.ajax-form', function(){
    $.ajax({url: url, type: type, data: data-from-form}).done(function(response){
    var specialCallback = $(this).attr('data-submit-callback');
    if(specialCallback)
       window[specialCallback](response);
    //common processing goes here
    });
});

//登录表单的特殊回调

function loginFormCallback(response){
    //do something special for login form here.
}