Question

（需要一些帮助，因为我是AJAX / JS的新手。）

目前正在尝试为网站创建AJAX / JS联系表单。该表单工作，并能够发送电子邮件没问题。但是，我在按下“submit”按钮时尝试使用以下工作流程。

1）联系表格向上滑动

2）出现Loading.gif

3）表格信息通过电子邮件发送

4）Loading.gif消失

5）在Loading.gif地方显示成功消息

我有1-3和5工作，但不能让＃4发生。

以下是我在submit_form.js中的代码：

if(hasError == false) {
$('#sendEmail').slideUp("fast",function() {
    $(this).after('<img src="loading.gif" alt="Loading" id="loading" />');
});

        $.post("sendmail.php",
            { emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
                function(data){
                    $("#sendEmail").slideUp("normal", function() {                 

                        $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
                    });
                }
             );
    }
        $(this).hide();
    return false;

任何人都可以帮助新手吗？

Answer 1

对于初学者我们没有这个功能

$('#sendEmail').slideUp("fast",function() {
    $(this).after('<img id="loading" src="loading.gif" alt="Loading"/>');
});

我们可以做到：

$('#sendEmail').slideUp("fast").after('<img id="loading" src="loading.gif" alt="Loading"/>');

关于我们$_POST的过度使用，我们会隐藏表单并加载图片。

$.post("sendmail.php",{ emailFrom: emailFromVal, subject: subjectVal, message: messageVal },
     success:function(){
         $("#sendEmail").slideUp();
         $("#loading").hide();
     }
 });

Answer 2

在

function(data){
    $("#sendEmail").slideUp("normal", function() {                 
        $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');
    });
}

回调，你真正需要slideUp的是图像，而不是表格，因为它已经被隐藏了。

改变你的

$("#sendEmail").slideUp

与

$("#loading").slideUp

Answer 3

我还没有测试过它，但我想如果你改变了

$("#sendEmail").slideUp("normal", function() {                 

      $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
});

到

$("#sendEmail").slideUp("normal", function() {                 
    $("#loading").hide();
    $("#sendEmail").before('<h1>Success! Your email was sent.</h1>');                                           
});

它应该有用

AJAX / JS联系表 - 隐藏img

3 个答案: