我正试图用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出现。
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) {....})