使用Ajax和beforeSend显示图像

我对jquery和ajax比较陌生，我对这些可能性感到惊讶！

我正在开发我的第一个ajax，jquery（带有validation插件）webform。 它差不多完成了，但有一件事我不明白。 我想显示一个加载图标并使用beforeSend方法禁用发送按钮。 但它不起作用，chrome没有显示任何错误消息。

这是代码

$(document).ready(function(){ $("#Formular").validate({ rules: { name: "required", email: { required: true, email: true }, yname: "required", yemail: { required: true, email: true } }, submitHandler: function(form) { theUrl = 'send.php'; var params = $(form).serialize(); $.ajax ({ type: "POST", url: theUrl, data: params, beforeSend : function(){ $('.loading_icon').show(); }, processData: false, async: false, success: function(response) { $('#response').hide(); $('#response').html(response); $('#response').fadeIn('slow'); $('.loading_icon').hide(); } }); } }); 

}）;

加载图标未显示。 它在submitHandler之前工作，所以css是正确的，图像也是。

这里没有任何东西的部分：

  beforeSend : function(){ $('.loading_icon').show(); }, 

我在这里和文档中搜索过，但我没有找到任何解决方案。 谢谢你的帮助！

Answer 1

JQuery文档说：

一个预请求回调函数，可用于在发送之前修改jqXHR（在jQuery 1.4.x，XMLHTTPRequest）对象中。 使用它来设置自定义标题等.jqXHR和设置映射作为参数传递。 这是一个Ajax事件。 在beforeSend函数中返回false将取消该请求。 从jQuery 1.5开始，无论请求的类型如何，都将调用beforeSend选项

这让我觉得它不应该用于加载图标之类的东西。 你为什么不这样做：

 var params = $(form).serialize(); $('.loading_icon').show(); $.ajax ({ type: "POST", url: theUrl, data: params, processData: false }).done(function(response) { $('#response').hide(); $('#response').html(response); $('#response').fadeIn('slow'); }).always(function() { $('.loading_icon').hide(); }); 

编辑

我使用Firebug调试了代码，工作正常。 这只是你的post太快你永远不会看到它。

编辑更新以使用jqXHR对象获得成功等。 删除了async:false因为永远不应该使用它…

Answer 2

它加载得如此之快以至于你看不到车轮是不正确的。 实际上，当您连续添加css更改和同步ajax请求时，更改会延迟，直到请求在某些浏览器（如Chrome）中完成。 查看你的ajax调用：

 async: false, 

调试时同步ajax调用期间的问题是调试器本身允许在停止之前完全执行每个方法，从而改变您最终看到的内容。 因此，在代码的任何行中设置断点，如下所示：

 $('.loading_icon').show(); $.ajax ({something}); 

它将显示加载图标。 要小心！ 因为当您没有设置任何断点时，加载图标将不会显示，直到结果发生（成功，错误）。

我发现在这种情况下正常工作的唯一方法是将ajax中的同步调用转换为异步调用。 如果您担心在此过程中允许用户触摸不适当的内容，只需在整个页面上添加div并通过它禁用任何点击事件。 以这种方式执行此操作，您会发现加载图标在整个ajax请求期间出现，而不仅仅在其结束时出现。