我可以为不同的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   
     } 
    }); 
});