我可以爲不同的ajax事件控制不同的進度條嗎？

Question

我有一個表格，有兩個使用ajax將信息提交給服務器的地方。

$("#loading img").ajaxStart(function(){ // this progress bar is used by both ajax submission. 
    $(this).show(); 
}).ajaxStop(function(){ 
    $(this).hide(); 
}); 

<div id="loading"> 
<img src="loading4.gif" border="0" /> 
</div> 

$('#countyForm').ajaxForm(options); // Case I: use ajax to submit the form 


$('form#carSelect').change(function(){ // Case II: use ajax to submit the field 
$.ajax({ 
    ... 
    } 
}); 
}); 

我該如何定製jQuery中的ajax，以便我可以對不同的ajax提交使用不同的進度條。

說我的情況，我使用image1和情況二我使用image2。

謝謝

Answer 1

Similar jsFiddle Example w/o ajaxForm

而不是使用Ajaxstart和停止，只顯示個性化加載圖像，然後再直接觸發Ajax。 Ajaxstop在頁面上完成所有ajax時觸發。你想要個性化的關注。

ajaxForm插件允許AJAX觸發後的回調函數。使用它來刪除您的自定義動畫。將單擊事件處理程序單獨綁定到表單的提交按鈕以加載該自定義動畫。我沒有使用這個插件，所以可能有一個更簡單的方法。

對於其他情況，只需加載自定義圖像，調用AJAX並在成功時刪除圖像。

// Case I -------------------------------- 

// Bind the event handler to the #countyForm submit button 
$("#countyForm:submit").click(function() { 
    // Throw in the customized loading animation when the form is submitted. 
    $("#idToShowLoading1").html('<img src="custom1.gif" />'); 
    // .ajaxForm() handles the AJAX and the success. 
}); 

// Make use of ajaxForm to handle your form 
$('#countyForm').ajaxForm(function() { 
    // remove loading img 
    $("#idToShowLoading1").html(''); 
    // Haven't used this plugin, but your options, etc here 
}); 

// Case II -------------------------------- 

$("form#carSelect").change(function() { 
    // First throw in the customized loading animation 
    $("#idToShowLoading2").html('<img src="custom2.gif" />'); 
    // Then make the Ajax call. 
    $.ajax({ 
     url: 'yoururlhere.html/blah.php', 
     success: function(data) { 
     // remove loading img or replace it w/ content 
     $("#idToShowLoading2").html(''); 
     // success stuff goes here   
     } 
    }); 
});