Question

我正在使用jQuery 1.11.1和jQuery validation plugin

我已将以下脚本添加到我的联系表单中以验证它并通过AJAX发送（代码中的{{hash_tag}}是Twig变量）：

<script>


    $("#contactform").validate({
        rules: {
            content_{{ hash_tag }}: {
                required: true,
                minlength: 20
            },
            name_{{ hash_tag }}: {
                required: true,
                minlength: 2
            },
            subject_{{ hash_tag }}: {
                required: true,
                minlength: 10
            },
            email_{{ hash_tag }}: {
                required: true,
                email: true
            }

        },
        submitHandler: function(form) {
            var postData = $(form).serializeArray();
            var formURL = $(form).attr("action");
            $.ajax(
                    {
                        url : formURL,
                        type: "POST",
                        data : postData,
                        success:function(data, textStatus, jqXHR)
                        {
                            $('#articlecontent').html(data.content);
                            $("html, body").animate({ scrollTop: 0 });
                        },
                        error: function(jqXHR, exception)
                        {
                            $(form).submit();
                        }
                    });
        }
    });

</script>

脚本（小测试后）似乎有效。但问题是 - 当用户正确填写表单并且PHP发送电子邮件时，可能需要几秒钟。用户点击提交按钮后当然不必知道该表单是通过AJAX发送的，并且可能认为某些内容无法正常工作，例如可能再次单击或执行其他操作。

问题是 - 如何向用户显示点击后发生的事情并在几秒钟后发送电子邮件？我不知道做这件事的最佳做法是什么。请给我一些很好的解决方案。我认为没有必要进度条（可能很难确定它需要多长时间），但也许其他一些效果会很好。

修改

改变submitHandler之后我现在有了：

    submitHandler: function(form) {
        var postData = $(form).serializeArray();
        var formURL = $(form).attr("action");
        $.ajax(
                {
                    url : formURL,
                    type: "POST",
                    data : postData,
                    beforeSend: function (){
                        $(form).hide();
                        $("#formsending").show();
                    },

                    success:function(data, textStatus, jqXHR)
                    {
                        $('#articlecontent').html(data.content);
                        $("html, body").animate({ scrollTop: 0 });
                    },
                    error: function(jqXHR, exception)
                    {
                        $(form).submit();
                    },
                    complete: function (){
                        $("#formsending").hide();
                        $(form).show();
                    }

                });
    }

它以某种方式工作，但仍然不是我想要的100％。当我点击发送时，表单被隐藏，并且正在显示电子邮件正在发送的信息，但在服务器站点上我还有数据验证。让我们假设jQuery / HTML5无法完成一些复杂的验证，必须在PHP中完成。当用户点击提交时，即使表单无效，也会显示正在发送电子邮件的小时间信息。是否有可能以某种方式在发送之前启动（或者可能是某些类似的操作），例如在第二次或0.5秒后启动，以确保电子邮件实际上是被发送的？

Answer 1

当ajax请求正在进行时，有一个很好的插件可以显示进度轮。

jQuery BlockUI

这是特别好的，因为它会自动显示任何ajax请求的进度轮，因此您无需在进行ajax调用的任何地方专门设置它。

使用此插件您需要编写的唯一代码是

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

编辑（来自问题更新）

如果您只想在验证成功并且实际发送电子邮件时显示进度微调器，那么您可以进行单独的ajax调用，该调用仅执行验证并且不显示任何进度（不应该采取太久只是为了验证）然后如果该调用成功，请进行单独的ajax调用，实际上发送电子邮件并显示微调器。

示例：

submitHandler: function(form) {
        var postData = $(form).serializeArray();
        var formURL = $(form).attr("action");
        var validateURL = "something else";
        $.ajax({
            url : validateURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR)
            {
                if(data.MyFieldThatIndicatesSuccess) {
                    $.ajax({
                        url : formURL,
                        type: "POST",
                        data : postData,
                        beforeSend: function (){
                            $(form).hide();
                            $("#formsending").show();
                        },
                        success: function(data, textStatus, jqXHR) {
                            $('#articlecontent').html(data.content);
                            $("html, body").animate({ scrollTop: 0 });
                        },
                        error: function(jqXHR, exception) {
                            //handle error
                        }
                        complete: function (){
                            $("#formsending").hide();
                            $(form).show();
                        }
                    });
                }
            },
            error: function(jqXHR, exception)
            {
                //handle error
            }
        });
    }

Answer 2

如果我正确理解你的问题，你想要的是当用户按下提交时显示的一些消息或动画，并且一旦php完成它就会再次消失？

如果是这样，您只需在注释区域添加一些代码即可显示/隐藏显示消息或微调器的元素。

submitHandler: function(form) {
        var postData = $(form).serializeArray();
        var formURL = $(form).attr("action");
        //Some code to make a div appear e.g.
        //$("#contactform").append("<div class='loading'><img src='spinner.gif'></div>");
        $.ajax(
                {
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data, textStatus, jqXHR)
                    {
                        //some code to make the div disapear e.g.
                        //$(".loading").remove();
                        $('#articlecontent').html(data.content);
                        $("html, body").animate({ scrollTop: 0 });
                    },
                    error: function(jqXHR, exception)
                    {
                        $(form).submit();
                    }
                });
    }

通过AJAX发送电子邮件 - 显示进度/状态

2 个答案: