如何在ajax请求中显示加载微调器？

Question

你好，我已经包括了给定的html代码

#expressShippingCalculation    
  %li.list-group-item
    %label
      %input#shipping_method3{:name => "shipping_method", :type => "radio", :value => "1"}
        Shipping
        %small (Delivery within 4-5 days)
  %li.list-group-item#method4
    %label
      = form_for @order, :url => update_express_shipping_path,:method => 'patch', :html => { :id => "shippingDetails" }, :remote => true do |form|
        = form.radio_button :express_shipping, true, :value => true, :id => 'shipping_method4', :name => 'shipping_method'
        Express Shipping
        %small.maroonColorText (Additional Charge of USD 10 applicable.)
  #spinner.spinner{:style => "display:none;"}
    %img#img-spinner{:alt => "Loading", :src => "spinner.gif"}/  

而js代码是

$('#expressShippingCalculation input').change ->
    if $('#shipping_method4').is(':checked')
      additionalAmountExpress()
      data = $('#shippingDetails').serialize()
      expressValue = true
    else 
      $('#additional-charge').hide()
      expressValue = false
    $.ajax
      url: '/update_express_shipping?expressShipping=' +expressValue
      type: 'PATCH'
    return     

现在我需要在我的ajax请求上显示加载微调器。请指导我如何在ajax请求中包含给定的代码

$('#spinner').bind('ajaxSend', ->
  $(this).show()
  return
).bind('ajaxStop', ->
  $(this).hide()
  return
).bind 'ajaxError', ->
  $(this).hide()
  return

请指导我如何包含此代码。

Answer 1

$(document).ajaxStart(function(){
    $('#spinner').show();
});
$(document).ajaxComplete(function(){
    $('#spinner').hide();
});
$(document).ajaxError(function(){
    $('#spinner').hide();
});

►ajaxStart

►ajaxError

►ajaxComplete