jQuery Ajax回调外部函数

Question

So this function works perfectly expect I have six more buttons and do not want my code to have a ton of repeat code, so is there a way to pull out the beforeSend call and make it an external callback function? Thank You In Advance

$('#button_status').on 'click', ->
username = $('#login_username').val()
password = $('#login_password').val()
mac_id = $('#login_mac').val()

$.ajax
  type: "GET"
  url: start_url + mac_id + "/status"
  dataType: "json"
  crossDomain: true
  cache: false

  beforeSend: (xhr) ->
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));

!More to Question!

I have this also part of my ajax but if I make all buttons have the same callback the error messages will be the same and pointless. I can I make this customizable for each button? Thank You!

  error: (xhr, ajaxOptions, thrownError) -> 
    console.dir arguments
    console.log("*| Status ", xhr.status)
    console.log("*| Error", thrownError)
    console.log("*| Ajax", ajaxOptions)
    if (not username? or not password?)
      $('#data-text').empty()   
      $('#data-text').append ("""<h1>Please Log In</h1>""")
      $('#input_username').fadeTo(100, 0.1).fadeTo(200, 1.0);
      $('#input_password').fadeTo(100, 0.1).fadeTo(200, 1.0);
      $('#header_user').css "background-color": "#d34242"
      $('#header_password').css "background-color": "#d34242"
      $('#data-text').css "background-color": "#d38642"
    else
      $('#data-text').empty()   
      $('#data-text').append ("""<h1>Failed Log In</h1>""")
      $('#input_username').fadeTo(100, 0.1).fadeTo(200, 1.0);
      $('#input_password').fadeTo(100, 0.1).fadeTo(200, 1.0);
      $('#header_user').css "background-color": "#d34242"
      $('#header_password').css "background-color": "#d34242"
      $('#data-text').css "background-color": "#d38642"

Answer 1

Could you not turn the beforeSend into a function?

var onBeforeSend = function(xhr) {
     xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));
}

and then do:

$.ajax
  type: "GET"
  url: start_url + mac_id + "/status"
  dataType: "json"
  crossDomain: true
  cache: false,
  beforeSend: onBeforeSend

It's not coffeescript, but that's how I would do it with plain javascript.

Would something like this work?

onBeforeSend = (xhr) ->
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));

$.ajax '/Foo/Bar/',
    type: "GET"
    url: start_url + mac_id + "/status"
    dataType: "json"
    crossDomain: true
    cache: false,
    beforeSend: (xhr) ->
        onBeforeSend xhr

Answer 2

Sure

callback = (xhr) -> xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password))
beforeSend: callback

Just make sure variables are part of the scope. CoffeScript is function scoped.