假如有一个表单，要通过ajax来提交上去
<form class="layui-form" id="formData" method="post" action="##" onsubmit="return false">
<!-- 省略若干layui代码 -->
<input type="text" name="username" required lay-verify="required" placeholder="username" autocomplete="off" class="layui-input">
<input type="password" name="password" required lay-verify="required" placeholder="password" autocomplete="off" class="layui-input">
<button class="layui-btn" lay-submit lay-filter="formDemo" id="onLogin">登录</button>
</form>
ajax提交代码
$("#onLogin").on("click",function () {
$.ajax({
type: "post",
// dataType: "json", // 服务器返回数据null时，无法判断识别
url: "/user/login", //请求地址
data:$("#formData").serialize(),//请求数据，#formData 如果不是一个 <form> 标签， serialize() 函数无法获取到 表单中<input> 中的值。
//请求成功后返回数据
success:function (user) {
if($.isEmptyObject(user)){
// user==null || user==""
layer.msg(‘用户名或密码错误‘, {icon: 2});
return;
}else{
window.location="/index"
return;
}
},
});
});
有两个大坑
1、当你的 <form> 表单没有设置 onsubmit="return false" 时，首先会默认使用表单提交，js无法精确的获取到 submit 点击提交时间，这样就导致了 <form> 提交 和 ajax 提交互相浑浊了
onsubmit="return false" 的意思是: 使你点击表单中 button 按钮时，使<form> 表单无论如何不会生效(阻止表单的提交行为)。这样就可以让 ajax 提交单独生效了，而不被 <form> 所干扰
2、后台 @ResponseBody 返回是 null 对象，并且设置了 dataType="json" ， ajax 的回调函数 success 不会生效不成功，但是会在 error:function () {......} 这个函数中生效。
补充说明：
onsubmit="return false;" 将无论何时都阻止表单的提交onsubmit="return check();" 是否提交表单取决于check()的返回值
原文：https://www.cnblogs.com/ressso/p/12313544.html