AJAX的POST方法传值
写在前面：
0.eclipse 工具下 Tomcat 部署 Java SSM框架的Maven项目的登录功能。（前提：ssm配置已完成，Tomcat部署已完成，java环境已配置）
1.数据库准备（mysql）
（第8步应该在第一步完成！！！注意，由于在下一时疏忽，刚想起来才写到了最后，读者可以先看最后，创建bean）
2.登录界面的代码（前端代码）
3.Controller层
4.Service层
5.ServiceImpl层
6.Dao层
7.可以忽略。。。
8.bean： User 和 AJAXResult
扫描二维码关注公众号，回复： 4792786 查看本文章
以下是AJAX的POST方法传值
1.数据库准备（mysql）
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(15) NOT NULL,
`userpswd` varchar(20) DEFAULT NULL,
`loginacct` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8
建表后如图所示
我添加了俩条数据（其实一条就好了。。。不影响）
2.登录界面的代码（前端代码）
<form id="loginForm" action="doLogin" method="post" class="form-signin" role="form">
<h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
<div class="form-group has-success has-feedback">
<input type="text" class="form-control" id="loginacct" name="loginacct" placeholder="请输入登录账号" autofocus>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<input type="text" class="form-control" id="userpswd" name="userpswd" placeholder="请输入登录密码" style="margin-top:10px;">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<select class="form-control" >
<option value="member">会员</option>
<option value="user">管理</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
<br>
<label>
忘记密码
</label>
<label style="float:right">
<a href="reg.html">我要注册</a>
</label>
</div>
<a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>
</form>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="layer/layer.js"></script>
<script>
while ("${param.errorMsg}"!=''){
layer.msg("${param.errorMsg}",{time:2000, icon:5,shift:6},function(){})
break;
}
function dologin(){
//非空检验
var loginacct=$("#loginacct").val();
if(loginacct==''){
layer.msg("账号不能为空",{time:2000, icon:5,shift:6},function(){})
return ;
}
var userpswd=$("#userpswd").val();
if(userpswd==''){
layer.msg("密码不能为空，请输入",{time:2000, icon:5,shift:6},function(){})
return;
}
//1.提交表单
/* $("#loginForm").submit(); */
//2.AJAX提交数据
var loadingIndex=null;
$.ajax({
type : "POST",
url : "doAJAXLogin",
data : {
"loginacct" : loginacct,
"userpswd" : userpswd
},
//加载显示
beforeSend : function(){
loadingIndex=layer.msg('玩命登录中...',{icon: 16});
},
success : function(result){
layer.close(loadingIndex);
if(result.success){
window.location.href="main";
}else{
layer.msg("登录账号或密码不正确，请重新输入",{time:2000, icon:5,shift:6},function(){})
}
}
});
}
</script>前端代码用到了一个叫layer的东西，，，可以把弹出框写的好看一点
比如：
我们谷歌浏览器的弹出框
而用了layer后的弹出框
显然，用了layer后美观一点哈哈哈哈
3.Controller层
@Controller
public class DispatcherController {
@Autowired
private UserService userService;
//跳转到登录页面
@RequestMapping("/login")
public String login() {
return "login";
}
//跳转到主页面
@RequestMapping("/main")
public String main() {
return "main";
}
//表单方法登录
@RequestMapping("/doLogin")
public String doLogin(User user, Model model) throws Exception{
User dbUser = userService.query4Login(user);
//判断用户信息是否存在
if(dbUser != null) {
return "main";
} else {
//登录失败，提示信息
String errorMsg="登录账号或密码不正确";
model.addAttribute("errorMsg", errorMsg);
return "redirect:login";
}
}
//AJAX方法 POST提交登录
@ResponseBody
@RequestMapping("/doAJAXLogin")
public Object doAJAXLogin(User user) {
AJAXResult result=new AJAXResult();
User dbUser = userService.query4Login(user);
if(dbUser != null) {
result.setSuccess(true);
} else {
//登录失败，提示信息
result.setSuccess(false);
}
return result;
}
}4.Service层
public interface UserService {
User query4Login(User user);
}
5.ServiceImpl层
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserDao userDao;
public User query4Login(User user) {
// TODO Auto-generated method stub
return userDao.query4Login(user);
}
}6.Dao层
public interface UserDao {
@Select("select * from user where loginacct=#{loginacct} and userpswd=#{userpswd}")
User query4Login(User user);
}
7.博客内容本来是打算写的简单一点，自己回顾的时候可以看得懂，但是想了想还是写的详细一点，万一有别人看呢，嗯 如果哪里有问题可以留言，有时间我会回答的....
如果哪里有bug可以留言，我修改
哦哦哦。。。差点忘了
很关键，还有俩个bean没有创建
8.bean： User 和 AJAXResult
public class User {
private Integer id;
private String username;
private String loginacct;
private String userpswd;
public String getUserpswd() {
return userpswd;
}
public void setUserpswd(String userpswd) {
this.userpswd = userpswd;
}
public String getLoginacct() {
return loginacct;
}
public void setLoginacct(String loginacct) {
this.loginacct = loginacct;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
public class AJAXResult {
private boolean success;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
}
好了，到此一个ssm框架下的maven项目中的AJAX传值就ojbk了，加油！！！（无bug，不人生）