ssm 框架使用ajax异步，实现登陆

只是简单写一下 js、jsp、和controller

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<script src="../easyUI/jquery.min.js"></script>
<script src="../js/login.js"></script>
<head>
    <title>u</title>
</head>
<body>
用户名：<input type="text" name="username"  id="username"><br>
密码：<input type="password" name="password" id="password"><br>
<button id="login" onclick="login()">登录</button>

</body>
</html>

function login() {
$('input[name="radioInput"]:checked').val();
      var username = $("#username").val();
      var password = $("#password").val();
      var url="http://localhost:8080/user/login.action";
       
  var user = {
      username:username,
      password:password
  };

  $.ajax({
      url:url,
      contentType:"application/json;charset=utf-8",
      type:"POST",
      data:JSON.stringify(user),
      dataType:"JSON",
      success:function (res) {
          if(res.username == username){
              if(res.password == password){
                  window.location.href = "http://localhost:8080/jsp/success.jsp";
              }else {
                  "密码错误"
              }
          }
          else {
              alert("用户名不存在")
          }
      }
  })
}

ajax把用户名和密码封装成JSON字符串，传给后台Controller， Controller得到前台传给的字符串（里面是一个User类）。通过这些信息（即前台传过来的信息）进行查找，将根据用户名查找的结果返回，然后在Ajax的Success 中进行判断（传入值和查询值）决定指向的页面

controller

@ResponseBody
    @RequestMapping(value = "/login.action")
    public  User  login(@RequestBody User user){
        
        User userLogin = userService.login(user.getUsername(), user.getPassword());
        
        return userLogin;
    }

这里是给ajax 返回一个user ，user自动封装为JSON

ssm 框架 使用ajax异步，实现登陆

相关推荐

ssm 框架使用ajax异步，实现登陆