陷阱 Ajax 表单提交事件

Question

在我的客户使用的 WordPress 主题中，联系表单是通过 Ajax 提交的。

表单标记

<form action="#" method="post" id="contactform">

    <input type="text" class="required" name="name" id="name" />
    <button name="send" type="submit" id="submit">Send</button>

    <div id="success"></div>
    <div id="failure"></div>

</form>

contact_form.js

(function ($) {

    function themeContactForm() {

        function start() {
            //binds the form elements here
        }


        function submit(e) {
            //check for form validation
            return false;
        }

        function send(data) {
            jQuery.post(
                ajaxurl,
                {
                    action : 'themeContactForm',
                    data : data
                },
                result
            );
        }

        function result(response) {
             if(response.success) {
                  //show success message
             } else {
                 //show failure message
             }    
        }

        start();
    }


    $.fn.themeContactForm = function() {

    };

}(jQuery));

app.js

$("#contactform").themeContactForm();

问题：点击提交后，成功或失败的响应大约需要 3-4 秒才会出现。在那段时间里，用户可能认为什么都没有发生，他们再次点击提交。结果，接收到相同表单数据的多个副本。

问题：在不触及上述任何文件的情况下，是否可以在单击提交时显示“微调器”，并在成功或失败消息来自脚本时隐藏它，所以用户知道该表单正在处理中。

我可以修改 contact_form.js 并完成我的工作，但在主题更新时所做的修改将会丢失。

我已尝试绑定到 ajaxComplete 事件，但不知何故无法使其工作。

$( document ).ajaxComplete(function( event, xhr, settings ) {
         alert("Global event called");  
         console.log( xhr.responseText );
});

但是警报根本没有触发。

Answer 1

方法：Ajax完成

编辑：我删除了关于 post 和 ajax 的部分，它们都做同样的事情。

这应该可行。确保侦听器直接附加到document。如果它仍然不起作用，请发布您的 jQuery 版本。

$(document).ajaxComplete( function(event,jqXHR,ajaxOptions){
    alert('!'); //add the spinner here
});

方法二：监听变化

当请求完成时，结果中的 DOM 发生了一些事情，是吗？听它，然后杀死微调器。

所以：编辑：这可能行不通，因为更改文本不会触发事件

$("#success, #failure").one("change",function(){
    alert(!); //kill the spinner
});

如果您无法监听，请使用 100 毫秒计时器来检查是否存在某些 DOM 更改。

这是一个计时器的工作示例：

http://jsfiddle.net/slicedtoad/3t3b9q3k/2/

$("#form").on("submit",function(e){ //simulates your ajax request
    window.setTimeout(function(){
        $("#success").text("success");
    },1000)
    return false;
});

$("#form").on("submit",function(){
    $("body").append("<div id='loading'>loading...</div>");
    var intervalID = window.setInterval(function(){
        if( $("#success").text() != "" ){
            $("#loading").remove();
            window.clearInterval(intervalID)
        }
    },100);
    return false;
});