陷阱 Ajax 表单提交事件

Posted 2023-05-08

【中文标题】陷阱 Ajax 表单提交事件

【英文标题】：Trap Ajax form submit event

【发布时间】：2015-03-30 05:27:53

【问题描述】：

在我的客户使用的 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 );
);

但是警报根本没有触发。

【问题讨论】：

为什么要求不要触摸任何文件？通常，您会将 AJAX 微调器作为“beforeSend”和“完成”功能的一部分包含在您可以附加到 jQuery AJAX 请求中。

@Mark : 正如我在帖子中提到的，我对这些文件所做的更改将在下次主题更新时丢失。

您能展示一下您是如何尝试绑定到 ajaxComplete 事件的吗？这应该是正确的方法，也许有人可以指出错误。

难道不能只覆盖新文件中的现有方法吗？见：***.com/questions/5007279/…

@movabo 你不需要覆盖 whole themeContactForm 函数吗？它所包含的所有功能本质上都是“私有的”。

【参考方案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;
);

【讨论】：

这似乎不太正确，所以我对其进行了测试，$.post 确实触发了全局 ajax 完成事件。 $.post 的文档页面上似乎也没有任何关于您的信息的注释。 $.post 只是$.ajax( type : 'POST' ) 的快捷方式。

@Jasper 你是对的，对不起。不知道为什么它没有触发...您正在将侦听器附加到 document 对吗？

是的，我复制了您发布的 .ajaxComplete 代码，然后将其粘贴到 JS 控制台，然后运行 ​​$.post('/') 并收到警报。似乎 OP 收到了一个他们没有注意到的 JS 错误，或者他们的绑定代码没有运行。