Ajax beforeSend函数似乎不起作用

时间:2016-05-06 12:46:38

标签: jquery ajax

我有一个表单可以将一个小文本文件发送到服务器,并使用 PHP 处理它的数据。结果显示在颜色框中。它工作正常,但我想在他的数据上传和处理(需要几秒钟)时向我的用户显示一条小消息,并在显示结果后再次隐藏它。但是该消息(span#ajaxloading)由于某种原因不会出现。

HTML:

<button type="button" id="fixit">Fix it!</button><span id="ajaxloading" style="display:none;">Your data is being processed...</span>

jQuery的:

jQuery("#fixit").click(function() {
    if(form.valid() == true ) {
        var formData = new FormData(jQuery('#ajastaja')[0]);
        jQuery.ajax({
            beforeSend: function(){
                jQuery('#ajaxloading').show(); // <- Not working!
            },
            url: '/path/to/my.php',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                jQuery('#ajaxloading').hide(); // <- Works here
                jQuery('#answerbox').html(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
        jQuery.colorbox({
            inline:true,
            href:'#answerbox',
            width:'500px',
            closeButton:false
        });
        return false;
    }
});

当我删除&#34;显示:无&#34;规则它当然显示并隐藏在颜色框弹出后(就像它应该)。那么我做错了什么?提前谢谢!

编辑:我很抱歉这个混乱,代码实际上已经包装在jQuery(document).ready(function(){...}); - 它只包含很多JQuery Validation插件方法,规则等,不应该影响我的问题。

4 个答案:

答案 0 :(得分:4)

尝试删除以下行

async: false,

答案 1 :(得分:1)

如果beforeSend功能不起作用,请尝试以这种方式调用您的点击功能..

Jquery的:

    jQuery("#fixit").click(function () {
    jQuery('#ajaxloading').show();
    if (form.valid() == true) {
        var formData = new FormData(jQuery('#ajastaja')[0]);
        jQuery.ajax({
            url: '/path/to/my.php',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                jQuery('#ajaxloading').hide(); // <- Works here
                jQuery('#answerbox').html(data);
            },
            error:function(data)
            {
                jQuery('#ajaxloading').hide();
            },
            cache: false,
            contentType: false,
            processData: false
        });
        jQuery.colorbox({
            inline: true,
            href: '#answerbox',
            width: '500px',
            closeButton: false
        });
        return false;
    }
    else {
        jQuery('#ajaxloading').hide();
    }
});

答案 2 :(得分:0)

我发现您的代码很好,表单没有在代码段中定义,但beforeSend在这里工作:

Works for me

和其他答案一样,我不得不把它包装在一个document.ready中,但这可能已经在你的代码片段之外完成了吗?

    var formData = new FormData(jQuery('#ajastaja')[0]);
    jQuery.ajax({
        beforeSend: function(){
          console.log('beforeSend')
            jQuery('#ajaxloading').show(); // <- Not working!
        },
        url: '/path/to/my.php',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            jQuery('#ajaxloading').hide(); // <- Works here
            jQuery('#answerbox').html(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

答案 3 :(得分:0)

尝试打包您的点击功能:

$(document).ready(function() {
    $("#fixit").click(function() {
        ...
    });
});