使用Ajax和beforeSend显示图像 [英] Show image with Ajax and beforeSend

问题描述

我对jquery和ajax还是比较陌生的，我对这种可能性感到惊讶！

I am relative new to jquery and ajax, and I am amazed about the possibilities!

我正在开发我的第一个Ajax，jquery(带有验证插件)网络表单.差不多完成了，但是我不明白一点.我想显示一个加载图标，并使用beforeSend方法禁用发送按钮.但这不起作用，chrome不会显示任何错误消息.

I am working on my first ajax, jquery (with validation plugin) webform. It's almost done, but a little thing I do not understand. I want to show a loading icon and disable the sending button with the beforeSend method. But it does not work and chrome does not show any error messages.

这是代码

$(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正确，图像也正确.

The loading Icon does not show up. It worked before the submitHandler, so the css is right and the image also.

这里没有什么:

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

我在这里和文档中进行了搜索，但是没有找到任何解决方案.感谢您的帮助！

I searched here and in the documentation also, but I did not found any solution. Thanks for any help!

推荐答案

JQuery文档说:

the JQuery documentation says:

请求前回调函数，可用于修改jqXHR (在jQuery 1.4.x中，XMLHTTPRequest)对象在发送之前.用这个 设置自定义标头等.jqXHR和设置映射作为 论点.这是一个Ajax事件.在beforeSend中返回false 功能将取消请求.从jQuery 1.5开始，beforeSend 无论请求的类型如何，都会调用该选项

A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings maps are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request

这让我觉得不应将其用于加载图标之类的东西.你为什么不只是:

Which makes me think it shouldn't be used for something like a loading icon. Why don't you just:

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调试了代码，工作正常.只是您的帖子是如此之快，以至于您从未见过.

I've debugged the code using Firebug, works fine. It's just your post is so fast you never see it.

修改 更新为成功使用jqXHR对象，等等.删除了async:false，因为它永远不应该被使用...

Edit updates to use jqXHR object for success,etc. Removed async:false as this should never be used...

这篇关于使用Ajax和beforeSend显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！