Question

在我的邮件发送脚本为我的联系表单供电时，邮件发送操作可能需要一些时间，在此期间用户不知道发生了什么。所以，我想添加一个＆＃34;邮件发送...＆＃34;通知。＆＃34;邮件发送......＆＃34;单击提交按钮时会出现通知，但脚本处理在此时无限停止，并且不会进行进一步的邮件处理。我将理解如何解决这个问题的线索。在下面找到AJAX脚本和html表单代码。

<script>
    $(document).ready(function(){
        $('#submit').click(function(){
            $.post("send.php", $("#contactform").serialize(),function(response) {  
              $('#success').html('<h4>Mail Sending...</h4>').load(url);
            });
            return false;
        });
    });
</script>

这是联系表格html代码：

<form action="" method="post" id="contactform" >
    <label for="name">Name:</label><br />
    <input type="text" name="name" id="name" /><br />
    <label for="email">Email:</label><br />
    <input type="text" name="email" id="email" /><br />
    <label for="message">Message:</label><br />
    <textarea name="message" id="message"></textarea><br />
    <input type="button" value="send" id="submit" />
    <div id="success" style="color:red;"></div>
</form>

Answer 1

那么，

＆＃34;在此期间，用户不知道会发生什么。所以，我想添加一个＆＃34;邮件发送...＆＃34; 。通知＆＃34;

ajaxStart 怎么样，因为这正是它的设计目标。

＆＃34;每当Ajax请求开始时显示加载消息（并且没有任何活动已经激活）。＆＃34;

您可以简单地将事件处理程序附加到任何元素：

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

然后，在启动ajax请求的情况下，将显示加载div。 ajax完成后，它将再次隐藏：

 $( "#loading" ).hide();

您需要确保默认隐藏div id（加载）。

＆＃34;但是脚本处理在此时无限停止，并且没有进行进一步的邮件处理。＆＃34;

每 jQUery Post ：

如果使用jQuery.post（）的请求返回错误代码，除非脚本还调用了全局.ajaxError（）方法，否则它将无提示失败。或者，从jQuery 1.5开始，jQuery.post（）返回的jqXHR对象的.error（）方法也可用于错误处理。

如果post失败，则应返回原因。

<script>
    $(document).ready(function(){
        $('#submit').click(function(){

            $.post( "test.php", $( "#testform" ).serialize() )  
            .done(function( data ) {
                 $('#success').html('<h4>Mail Sending...</h4>');
                  // You should not do a .load within another ajax call so placing it here is okay as it will execute AFTER the original one completes, but it will trigger the ajaxStart method again.
            })
            .fail(function ( data ) {
               console.log(data);
            });
        });
    });
</script>

不幸的是我在移动设备上，所以我无法测试上述内容以确保其正常运行，但这应该可以让您入门。

在AJAX请求期间添加“邮件发送...”通知

1 个答案: