Question

我有一个表单可以将一个小文本文件发送到服务器，并使用 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插件方法，规则等，不应该影响我的问题。

Answer 1

尝试删除以下行

async: false,

Answer 2

如果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();
    }
});

Answer 3

我发现您的代码很好，表单没有在代码段中定义，但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
    });

Answer 4

尝试打包您的点击功能：

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

Ajax beforeSend函数似乎不起作用

4 个答案: