Ajax表单不能用event.preventDefault()来阻止页面重新加载

Ajax Form Cannot Prevent Page Reload with event.preventDefault();

本文关键字：加载 新加载 不能 表单 event Ajax preventDefault      更新时间：2023-09-26

我有以下代码，应该通过Ajax提交表单，而不必重新加载页面:

$( document ).on('submit', '.login_form', function( event ){
    event.preventDefault();
    var $this = $(this);
    $.ajax({
        data: "action=login_submit&" + $this.serialize(),
        type: "POST",
        url: _ajax_login_settings.ajaxurl,
        success: function( msg ){
            ajax_login_register_show_message( $this, msg );
        }
    });
});

然而，由于某种原因，尽管event.preventDefault();函数应该阻止表单实际发射，但它实际上确实发射了。

我的问题是，如何防止上面的表单重新加载页面?

谢谢

不要在文档上附加侦听器，而是在提交按钮上使用on click处理程序，并将类型更改为button。

<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
  //do ajax here
});

快乐编码!!

例如，你可以这样写

 $(".login_form").on('submit', function( event ){
    var $this = $(this);
    $.ajax({         
       data: "action=login_submit&" + $this.serialize(),
       type: "POST",
       url: _ajax_login_settings.ajaxurl,
       success: function( msg ){
        ajax_login_register_show_message( $this, msg );
      }
    });
    event.preventDefault();
 });

您可以使用jquery和ajax来做到这一点。下面是一段不错的代码，它不会刷新页面，但在提交时，表单会被隐藏，并被一个感谢信息所取代。使用sendmail.php脚本将表单数据发送到电子邮件地址。

假设您的表单有3个输入字段-姓名，电子邮件和消息。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val(); 
var email=jQuery('#email').val();   
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>

在表单标签的顶部添加这个来显示感谢信息。

<div id='message'></div>

享受编码!

相关文章：