防止在提交AJAX表单后重新加载页面

时间:2018-09-18 作者:Hans Dampf

我正试图用ajax在wordpress中提交表单。但是在第一次提交之后,页面本身被再次调用。

我的表单

<form class="et_pb_contact_form clearfix" method="post" action="" id="loginform">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last" data-id="mail" data-type="input">
    <label for="et_pb_contact_mail_1" class="et_pb_contact_form_label">E-Mail-Adresse</label>
    <input type="email" name="mail" id="mail" value="" placeholder="E-Mail-Adresse" required=""/>
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_last" data-id="pw" data-type="input">
    <label for="et_pb_contact_pw_1" class="et_pb_contact_form_label">Passwort</label>
    <input type="password" name="pw" id="pw" value="" placeholder="Passwort" />
</p>
<div class="et_contact_bottom_container">                       
    <button type="submit" class="et_pb_contact_submit et_pb_button">Einloggen</button>
</div>                  

Javascript:

jQuery(document).ready(function() {
    jQuery(document).on(\'submit\', \'#loginform\' ,function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: \'backend_login.php\',            
            data: jQuery(this).serialize(),            
            success: function(data) {
                if (data === \'true\') {
                    window.location = \'main.php\';
                }
                else if (data.indexOf("Fehler") !== -1) {
                    alert(data);
                }
                else {
                    jQuery(\'#loginnote\').fadeIn();
                }
            }
        });
    });
});
如果我打开页面([域]/登录)并点击提交按钮,会出现前两个XHR,其中第一个是正确的。但是,第二个XHR来自哪里,如何防止这种情况?新加载站点后,我再次点击提交按钮,只有正确的第三个XHR出现。

enter image description here

2 个回复
SO网友:Hans

要解决这个问题,需要解除触发第二个AJAX请求的事件的绑定。您需要确保unbind() 在事件绑定发生后调用函数。

那么,为什么不直接将其加载到页脚中呢?一个原因是绑定事件的另一个脚本可能也正在加载到页脚中。

要控制脚本的加载顺序,实际上可以使用dependencies 的参数wp_enqueue_scripts(). 您只需要知道要作为依赖项添加的脚本的处理程序:

wp_enqueue_script( \'my-handler\', \'script.js\', array( \'another-script-handler\' ) );
my-handler 现在取决于,因此在之后加载another-script-handler.

SO网友:Toheeb

删除此行代码window.location = \'main.php\';

那你最好用这个

jQuery(\'#loginform\').on(\'submit\',function(e) {e.preventDefault();.....});
比你拥有的

jQuery(document).on(\'submit\', \'#loginform\' ,function(e) {....})

结束

相关推荐

WP_QUERY AJAX加载器检测帖子结束

我构建了ajax加载程序,如下所示。如何检测它何时到达所有帖子的末尾?这样我就可以让“更多”按钮消失,或者不再可以点击。页面模板中:WP_Query stuff... if ($press_posts->max_num_pages > 1) : echo \'<a class=\"link-button\" id=\"load-more\">More</a>\'; endif; 功能。phpfunction more_