我可以为不同的ajax事件控制不同的进度条吗?
问题描述:
我有一个表格,有两个使用ajax将信息提交给服务器的地方。我可以为不同的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。
谢谢
答
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
}
});
});
Hello Peter, 谢谢你的帮助。 我们可以添加到此代码的另一步是处理成功和错误的结束事件。 谢谢 – q0987 2010-08-19 14:24:00
@ q0987 - 查看.ajax()文档 - http://api.jquery.com/jQuery.ajax/。为了处理错误,除了已经存在的'success:'回调函数和'回调函数'(在引用页面上的回调函数下的#2)之外,只需添加。 – 2010-08-19 19:40:06
谢谢你的进一步帮助:) – q0987 2010-08-20 04:23:20