1

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

我正在开发我的第一个 ajax，jquery（带有验证插件）网络表单。它几乎完成了，但有一点我不明白。我想显示一个加载图标并使用 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();
            },

我在此处和文档中也进行了搜索，但没有找到任何解决方案。谢谢你的帮助！

4

2 回答 2

2

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，因为这永远不应该使用...

于 2012-08-22T08:49:27.763 回答
2

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

async: false,

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

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

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

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

于 2014-05-29T12:01:55.860 回答