最近在做一个作业，涉及到了注册登录，然后想要实现点击注册表单的提交按钮后不跳转页面，并且弹出注册成功与否的提示框。由于本人比较菜，而且对前端的知识了解甚少，在经过漫长时间才找到解决的方法。
在本次实例用到了ajax（第一次用ajax），首先先附上注册的表单代码（用的是模式框，为了记录一起附上了）
<!-- 我用的是模式框 -->
<div id="register" class="modal fade" tabindex="-1">
<div class="modal-dialog" id="modal">
<div class="modal-content">
<div class="modal-body">
<!-- 模式框右上角的按钮 -->
<button class="close" data-dismiss="modal" id="close" onclick="reset('registerForm')">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">注册</h1>
</div>
<div class="modal-body">
<!-- 注册表单 -->
<form class="form-group" id="registerForm" action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<label for="userIdForR">帐号</label>
<input class="form-control" type="text" name="userId" id="userIdForR"
placeholder="手机号码注册">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<label for="password1ForR">密码</label>
<input class="form-control" type="password" name="password" id="password1ForR"
placeholder="至少6位且不多于20位的字母或数字">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<label for="password2ForR">再次输入密码</label>
<input class="form-control" type="password" name="confirmPassword" id="password2ForR"
placeholder="至少6位且不多于20位的字母或数字">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-ok"></span>
<label for="mail">邮箱</label>
<input class="form-control" type="email" name="mail" id="mail" placeholder="例如:[email protected]">
</div>
<div class="text-right">
<button class="btn btn-primary" type="button" id="submit" onclick="register()">提交
</button>
<button class="btn btn-danger" data-dismiss="modal" onclick="reset('registerForm')">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
</form>
</div>
</div>
</div>
</div>在上面需要注意的是form那里的设置，由于要用ajax，所以需要让原来表单的提交失效，所以需要要加上οnsubmit="return false" ，其它得也照抄吧。然后在提交按钮那里添加点击事件
下面是js代码
function register() {
//校验注册表单里的信息是否正确
if (!validate())
return;
//registerForm为表单的id，formdata可以获取表单的数据，比较方便
var form = new FormData(document.getElementById("registerForm"));
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/register",//要响应的url
data: form,
async: false, //false为同步，true为异步
processData: false,
contentType: false,
success: function (data) {
//表示注册不成功，由于控制器返回的是map，所以就可以用data[key]
alert(data["warnMsg"]);
if (result["warnMsg"].search("成功") != -1) {
document.getElementById("registerForm").reset();
//关闭窗口，close为模式框右上角按钮的id
document.getElementById("close").click();
}
},
error: function (result) {
alert("出现异常");
//刷新窗体
window.location.href = window.location.href;
}
});
}控制器代码
@RequestMapping("/register")
//下面的注解用于将map打包发给ajax
@ResponseBody
public Map<String,String> HandleRegister(User user) {
Map<String,String> model=new HashMap<>();
if (插入不成功) {
model.put("warnMsg", "该手机号码已注册，请查看号码是否输入正确或者选择忘记密码");
} else {
model.put("warnMsg","注册成功，可以进行登录啦！");
}
return model;
}按照上面的来写，就如愿以偿的实现了提交数据不跳转页面，局部刷新网页并跳出弹窗！！！
参考链接：