ajax调用的画面上session为空_使用SSM和ajax做一个简易的论坛-02(注册和登录)

一、登录页面前端

页面上放了两个文本框，一个是用户名，一个是密码，点击登录按钮后可以把用户名和密码发送到后端校验。如果后端返回”true”就重定向到帖子列表页面，否则提示用户名或密码错误。

1.html元素（省略样式）

<label>用户名</label>
<input type="text" id="username" placeholder="用户名"/><br/>
<label>密码</label>
<input type="password" id="password" placeholder="密码"/><br/>
<button onclick="f()">登录</button>
<!--直接进入贴子列表页面-->
<a href="tieba/page">游客访问</a>

2.script

 function f(){
   var username=document.getElementById("username").value;
   var password=document.getElementById("password").value;
   $.ajax({
   type:"post",
   url:"check/loginTo",
   data:{
     "username":username,
     "password":password
   },
   async:true,
   success:function(data){
     if(data=="true"){
     //重定向到帖子列表的页面，因为后端使用了@ResponseBody，所以选择在前端重定向了
       window.location.href="tieba/page";
     }else{
       alert("用户名或密码错误!");
     }
   }
 });

二、登录的后端

通过request.getParameter方法获得用户名和密码，然后调用Service层的方法进行校验，如果用户名和密码正确，就把user塞进session里，服务端会为每个浏览器创建一个独立的session对象，到时候找session有没有user就可以了。

当然我们后面也可以使用cookie做一个记住登录状态的功能，我们以后再改。

@RequestMapping("/loginTo")
@ResponseBody
public String loginUser(HttpServletRequest request, HttpSession session) {
 User user=new User();
 user.setUsername(request.getParameter("username"));
 user.setPassword(request.getParameter("password"));
 if(userService.isCorrect(user)==true){
 user=userService.findByUsername(user.getUsername());
 session.setAttribute("user",user);
 return "true";
 } else {
 return "false";
 }
}

三、user的service层

1.校验用户名和密码是否正确

@Autowired
private IUserDao userDao;
public boolean isCorrect(User user){
    if(userDao.findByLoginInfo(user)==null){
        return false;
    } else {
        return true;
    }
}

2.根据用户名返回用户信息

public User findByUsername(String username){
    return userDao.findByUsername(username);
}

四、user的Dao层

1.根据用户名和密码查询user

@Select("select * from user where username = #{username} AND password=#{password}")
public User findByLoginInfo(User user);

2.根据用户名查询user

@Select(value = "select * from user where username = #{username}")
public User findByUsername(String username);

五、注册的前端页面

如果后台找到用户名一样的用户，提示用户换一个用户名。

1.html元素（省略样式）

<label>用户名</label>
<input type="text" id="r_username"/><br/>
<label>密码</label>
<input type="password" id="r_pswd_1"><br/>
<label>再输入一次密码</label>
<input type="password" id="r_pswd_2"><br/>
<button id="rgbtn" onclick="register()">注册</button><br>

2.script

function register() {
  var username=document.getElementById("r_username").value;
   var pswd1=document.getElementById("r_pswd_1").value;
   var pswd2=document.getElementById("r_pswd_2").value;
   if(pswd1 != pswd2){
     alert("两次输入的密码不一致");
   }else if(username=="" || pswd1=="" || pswd2==""){
     alert("用户名或密码不能为空");
   }else{
  jQuery.ajax({
   url:"register",
   contentType:"application/json;charset=UTF-8",
   data:JSON.stringify({"username":username,"password":pswd1}),
   dataType:"json",
   type:"post",
   success(data){
   //alert(data);
     if(JSON.stringify(data)=="true"){
       alert("注册成功!");
     }else{
       alert("该用户名已经存在，重新换一个吧。");
     }
   }
 });
 }
}

六、注册的Controller

@RequestMapping("/register")
public @ResponseBody Boolean register(@RequestBody User user){
 System.out.println(user);
 if(userDao.findByUsername(user.getUsername())==null)
 {
 //System.out.println("没有找到用户名为"+user.getUsername()+"的成员，开始注册。。。。。。");
 userService.saveUser(user);
 return true;
 } else{
 //System.out.println("该用户已经存在。");
 return false;
 }
}

七、关于注册的Service层

public void saveUser(User user){
 userDao.SaveUser(user);
}

八、关于注册的Dao层

@Insert(value="insert into user (username,password) values (#{username},#{password})")
public void SaveUser(User user);