用ssm框架配合layui实现添加功能
controller层
-------这里为了更方便,只用了一个返回值用于前端判定
//添加
@RequestMapping("/adminadd")
public String adminadd(User user) {
User user1 = userservice.queryUserByusername(user.getUsername());
if(user.getRole_id()==0){
user.setRole("普通用户");
}
if(user.getRole_id()==1){
user.setRole("管理员");
}
System.out.println(user);
String msg = "0";
if (user1 == null) {
msg = "0";
userservice.queryAddUser(user);
}
if (user1 != null ) {
msg = "1";
}
System.out.println(msg);
return msg;
}
layui前台
这里遇到几个坑:
1、如果遇到验证未通过表单提交问题,这种情况很可能是没有绑定表单监听事件,只绑定了按钮提交时间。
2、如果遇到前台向后台传值成功,而前台接收不到后台的返回值,状态值报错 canceled,则可能是表单监听事件没有返回值,return false;这个在自己写的时候坑了好久。
//添加
<script>
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form
, layer = layui.layer
, $ = layui.jquery;
//自定义验证函数,因为layui自带的不够多-----
form.verify({
repass: function (value) {
if ($('#password').val() != $('#repassword').val()) {
return '两次密码不一致';
}
}
});
form.on('submit(add)', function (data) {
var admindate = $("#adminadd").serialize();
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/user/adminadd",//url
data: admindate,
success: function (data) {
console.log(data);
if (data == 0) {
layer.closeAll('loading');
layer.load(2);
layer.msg("添加成功", {icon: 6});
setTimeout(function () {
window.parent.location.reload();//修改成功后刷新父界面
}, 1000);
}
if (data == 1) {
layer.msg("用户名已存在!", {icon: 5});
}
},
error: function () {
layer.msg("出现异常!", {icon: 5});
}
});
return false;
});
});
</script>