$.ajax的事件，如何创建回调？

Question

我知道标题不是很直观，所以我将尝试详细说明我的问题：

我正在创建一个 jQuery 插件来进行异步调用。 有了它，我可以使用以下命令发布帖子：

$("form").bindAjaxPost "post"

问题是我想为这些事件创建回调（beforeSend、complete、success, error)，例如，该命令将类似于：

$("form").bindAjaxPost "post", 
    success: (data) -> console.log "user success #{data}"
    beforeSend: () -> console.log "user beforeSend"

请注意，事件 beforeSend 和 success 是由插件的用户以及插件代码的内部：参见代码：

方法post jquery插件

post: (ajaxUserOptions)-> 

    ajaxOptions = 
        type: "POST"
        url: @options.url
        data: $(@form).serialize()
        dataType: @options.dataType

        beforeSend: ->
            console.log "plugin beforeSend"

        complete: ->
            console.log "plugin complete"

        success: (data) ->
            console.log "plugin success"

        error: (request) ->
            console.log "plugin error"


    ajaxOptions = $.extend {}, ajaxUserOptions, ajaxOptions if ajaxUserOptions
    $.ajax(ajaxOptions)

问题

我想事件成功，应该在内部调用，然后是用户定义的事件插件。 （此顺序）

执行示例

Command

$("form").bindAjaxPost "post", 
    success: (data) -> console.log "user success #{data}"
    beforeSend: () -> console.log "user beforeSend"

Output

插件 beforeSend 用户发送前 插件成功 用户成功

尝试

正如你在代码中看到的，我尝试使用 jQuery 的命令extend。但它不起作用，因为 $.ajax().beforeSend 只接受一个函数。

我还尝试访问 ajaxUserOptions 但 ajaxUserOptions 在事件 success、beforeSend... 中不可用，因为这些调用是异步的。

感谢大家的帮助！

Answer 1

您可能会发现使用 jQuery 1.5 中添加到 $.ajax 返回值的 Promise 接口更容易实现这一点。这样，您可以附加多个 complete、success 和 error 回调（最好是 always、done 和 fail，因为以前的名称在 jQuery 1.8 中将被弃用。）因此您的代码可能会变成

    post: (ajaxUserOptions = {}) -> 

        defaultAjaxOptions =
            type: "POST"
            url: @options.url
            data: $(@form).serialize()
            dataType: @options.dataType

        jqXHR = $.ajax($.extend {}, ajaxUserOptions, defaultAjaxOptions)
        jqXHR.always pluginAlways
        jqXHR.always ajaxUserOptions.always if ajaxUserOptions.always
        # and likewise for fail and done

beforeSend 是一个更棘手的情况，因为您可以'不要这样做jqXHR 对象，但这只是将插件的函数和用户的函数包装在单个函数中的问题，其中，如果任一函数返回 false，则外部函数会执行此操作（因为这会停止 Ajax 请求）：

beforeSend = ->
  return false if pluginBeforeSend() is false
  return false if ajaxUserOptions?.beforeSend() is false

Answer 2

您能否从插件内部调用用户提供的回调（如果存在）？与此类似：

post: (ajaxUserOptions)-> 

  ajaxOptions = 
    type: "POST"
    url: @options.url
    data: $(@form).serialize()
    dataType: @options.dataType

    beforeSend: ->
      console.log "plugin beforeSend"
      ajaxUserOptions.beforeSend() if ajaxUserOptions?.beforeSend?

    complete: ->
      console.log "plugin complete"

    success: (data) ->
      console.log "plugin success"
      ajaxUserOptions.success(data) if ajaxUserOptions?.success?

    error: (request) ->
      console.log "plugin error"

    $.ajax(ajaxOptions)