在表單提交之後和重定向之前添加加載屏幕

Question

我有一個使用MVC3和Jquerymobile的移動應用程序。在表單提交中（使用ajax函數）我想在提交和重定向時顯示加載圖標（ajax-loader.png）。謝謝！

我AJAX功能：

$("#add").click(function() { 
    $.validator.unobtrusive.parse($('form')); //added 
    if ($("form").valid()) { 
     var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val()); 
     $.ajax({ 
      url: '@Url.Action("SaveLine", "AddLine")', 
      type: 'post', 
      data: { ids: IDs }, 
      dataType: 'json', 
      traditional: true, 
      success: function (data) { 
       if (data.success == true) { 
        $("#ajaxPostMessage").html(data.Success); 
        $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function() { 
         window.location.href = '@Url.Action("Index", "AddLine")'; 
        }).delay(1800) 
       } 
       else { 
        $("#ajaxPostMessage").html(data.Error); 
        $("#ajaxPostMessage").addClass('ajaxMessage'); 
        $("#ajaxPostMessage").show(); 
       } 
      } 
     }); 
    } 
    return false; 
}); 

Answer 1

嘗試（未經測試）：

$("#add").click(function() { 
    $.validator.unobtrusive.parse($('form')); //added 
    if ($("form").valid()) { 
     var IDs = new Array($("#SelectedProduct").val(), $("#SelectedAccount").val(), $("#SelectedProject").val(), $("#SelectedTask").val(), $("#date").val(), $("#duration").val()); 
     $.ajax({ 
      url: '@Url.Action("SaveLine", "AddLine")', 
      type: 'post', 
      data: { ids: IDs }, 
      dataType: 'json', 
      traditional: true, 
      beforeSend: function(jqXHR, settings){ 
       $.mobile.showPageLoadingMsg(); 
      }, 
      success: function (data) { 
       $.mobile.hidePageLoadingMsg(); 
       if (data.success == true) { 
        $("#ajaxPostMessage").html(data.Success); 
        $("#ajaxPostMessage").addClass('ajaxMessage').slideDown(function() { 
         window.location.href = '@Url.Action("Index", "AddLine")'; 
        }).delay(1800) 
       } 
       else { 
        $("#ajaxPostMessage").html(data.Error); 
        $("#ajaxPostMessage").addClass('ajaxMessage'); 
        $("#ajaxPostMessage").show(); 
       } 
      } 
     }); 
    } 
    return false; 
}); 

來源：

http://forum.jquery.com/topic/how-to-show-hide-loading-spinner-in-jquery-mobile http://api.jquery.com/jQuery.ajax/