Javascript Jquery submitHandler中的Ajax表单提交不起作用

我需要用jQuery验证插件验证表单，并在不刷新页面的情况下将数据提交到数据库。我表格中的所有字段都标记为必填字段。但是，即使字段为空，也会提交字段。此外，页面保持刷新

这是我的JavaScript代码：

    $('#submitButton').click(function() {  
    $("#myForm").validate({
       debug: true,
       rules: {
            name: {
                required: true
            },
            user_mail: {
                required: true
            }
       },
       messages:{
           //messages     
       },
       submitHandler(function(form) {
            $.ajax({  
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType : 'json',
              success(function(data) {
                if (data){
                    alert("success");
                    $(this)[0].reset();
                }
              })
            });
            return false;
        });
  });
}

这就是php的样子

  <?php

    function NewUser(){ 
    $fullname = $_POST['name']; 
    $emailaddress = $_POST['user_mail']; 


    $query = "INSERT INTO my_table (fullName,emailaddress) VALUES ('$fullname','$emailaddress')"; 
    $data = mysql_query($query)or die(mysql_error()); 
    echo json_encode($data);
    } 

    if(isset($_POST['submit'])){ 
    NewUser();
    }

    ?>

---

尝试在单击处理程序中粘贴
事件.preventDefault（）
：

$('#submitButton').click(function(event) {
    event.preventDefault();  

因此，通过javascript防止默认按钮行为是有效的。但是，我更喜欢只制作按钮type=“button”



这也将阻止表单提交；这是一个偏好的问题，我更喜欢它，因为它通过DOM驱动行为，而不是为这样的东西添加更多jquery

仅供参考，位于
中的按钮的默认类型为type=“submit”
 这就是如何使用
submitHandler
。阅读能帮助你更好地理解插件的文章总是很好的

submitHandler（默认值：本机表单提交）
类型：函数（）
用于在表单有效时处理实际提交的回调。获取窗体作为唯一参数。替换默认提交


（函数（$，W，D）
{
var JQUERY4U={}

JQUERY4U.UTIL =
{
    setupFormValidation: function()
    {
        //form validation rules
        $("#formid").validate({
            rules: {

                fielname1: {required : true},
                fielname2: {required : true},
                agree: "required"
            },
            messages: {
                fielname1: {required :"<p>Please enter your fielname1</p>"  },
                fielname2: {required :"<p>Please enter your fielname2</p>"  },
                agree: "Please accept our policy"
            }               
        });
    }       
}

//when the dom has loaded setup form validation rules
$(D).ready(function($) {
    JQUERY4U.UTIL.setupFormValidation();

});

JQUERY4U.UTIL=
{
setupFormValidation:函数（）
{
//表单验证规则
$（“#formid”）。验证({
规则：{
fielname1:{required:true}，
fielname2:{required:true}，
同意：“必需”
},
信息：{
fielname1:{必需：请输入您的fielname1
“}，
fielname2:{必需：请输入您的fielname2
“}，
同意：“请接受我们的政策”
}               
});
}       
}
//当dom加载了设置表单验证规则时
$（D）.就绪（函数（$）{
JQUERY4U.UTIL.setupFormValidation（）；
});

})（jQuery、窗口、文档）；
试试：

$('#submitButton').click(function() {  
    $("#myForm").validate({
       debug: true,
       rules: {
            name: {
                required: true
            },
            user_mail: {
                required: true
            }
       },
       messages:{
           //messages     
       },
       submitHandler: function (form) {
            $.ajax({  
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType : 'json',
              success(function(data) {
                if (data){
                    alert("success");
                    $(this)[0].reset();
                }
              })
            });
            return false;
       }
  });
}

并从
控制台日志中检查是否有错误？看起来您正在使用某种验证插件，最好将其包含在您的问题中。控制台日志中没有错误，只是重定向到带有“true”消息的新页面。我也在使用jQuery验证插件为什么OP要“尝试这个”？请添加一个解释，说明你做了什么，以及你为什么这样做，不仅是为了OP，也是为了SO的未来访问者。我的主要问题是Ajax提交，它根本不起作用。验证工作正常
JQUERY4U.UTIL =
{
    setupFormValidation: function()
    {
        //form validation rules
        $("#formid").validate({
            rules: {

                fielname1: {required : true},
                fielname2: {required : true},
                agree: "required"
            },
            messages: {
                fielname1: {required :"<p>Please enter your fielname1</p>"  },
                fielname2: {required :"<p>Please enter your fielname2</p>"  },
                agree: "Please accept our policy"
            }               
        });
    }       
}

//when the dom has loaded setup form validation rules
$(D).ready(function($) {
    JQUERY4U.UTIL.setupFormValidation();

});

$('#submitButton').click(function() {  
    $("#myForm").validate({
       debug: true,
       rules: {
            name: {
                required: true
            },
            user_mail: {
                required: true
            }
       },
       messages:{
           //messages     
       },
       submitHandler: function (form) {
            $.ajax({  
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              dataType : 'json',
              success(function(data) {
                if (data){
                    alert("success");
                    $(this)[0].reset();
                }
              })
            });
            return false;
       }
  });
}