Question

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

我正在开发我的第一个ajax，jquery（带有验证插件）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调试了代码，运行正常。这只是你的帖子太快你永远不会看到它。

修改更新以使用jqXHR对象获得成功等。删除了async:false，因为永远不会使用它...

Answer 2

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

async: false,

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

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

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

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

使用Ajax和beforeSend显示图像

2 个答案: