SSM+JQuery+Ajax登录验证

最新推荐文章于 2024-04-03 21:40:07 发布

· Coisini

最新推荐文章于 2024-04-03 21:40:07 发布

阅读量1.1w

点赞数 3

文章标签： jquery ajax spring mvc ssm框架

本文链接：https://blog.csdn.net/qq_36476972/article/details/70242177

版权

前后端ajax交互验证

使用SSM框架，上次写了SSM的搭建，有兴趣的可以看看 http://blog.csdn.net/qq_36476972/article/details/70212990

好了，接下来直接上代码，实体类 User就直接跳过了都是getter、setter。下面是接口方法：

    //验证用户名密码
    @Select("select * from t_user where login_name=#{login_name,jdbcType=VARCHAR} and login_password=#{login_password,jdbcType=VARCHAR}")
    User getByNameAndPwd(@Param("login_name")String login_name,@Param("login_password")String login_password);

然后UserService

package com.ys.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ys.bean.User;
import com.ys.dao.UserDao;

@Service
public class UserService{

    @Autowired
    private UserDao userdao;
    /**
     * 验证登录
     * @param login_name
     * @param login_password
     * @param request
     * @return
     */
    public Map<String, Object> loginValid(String login_name,String login_password,HttpServletRequest request){
        User user=userdao.getByNameAndPwd(login_name, login_password);
        Map<String, Object> map=new HashMap<>();
        if(user==null){
            map.put("status", "userNameOrPwdError");
        }else if(user!=null&&!"".equals(user.getUser_id())){
            map.put("status", "ok");
            map.put("user", user);
            request.getSession().setAttribute("user", user);
        }
        return map;
    }
}

注解不要忘了加上，下边UseController


@Controller
public class UserController {

    @Autowired
    private UserService userservice;

    //登录
    @RequestMapping(value="login",method=RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> login(String login_name,String login_password,HttpServletRequest request){
        return userservice.loginValid(login_name, login_password, request);
    }

    //注销
    @RequestMapping(value="loginOutput")
    public String loginOutput(HttpServletRequest request){
        request.getSession().invalidate();
        return "index";
    }

下面是index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>     
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="login">
<c:if test="${user!=null}">
    <span>${user.user_name} 你好</span>
    <a href="<%=path%>/loginOutput">注销</a>
</c:if>
<c:if test="${user==null }">
<a href="<%=path%>/loginInput">登录</a>
</c:if>
</div>
</body>
</html>

这里做了个判断读取session里的值判断就好了如果登录了session就有值 UserService里已经放进去了

最后login.jsp 页面加上JS文件 JQuery和JQuery-validate

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="<%=path%>/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/jquery/jquery.validate.js"></script>
<body>
<form method="post" id="signupForm">
<div id="loginError"></div>
    用户名：<input type="text" name="login_name" id="name"/><br>
    密码：<input type="password" name="login_password" id="pwd"/><br>
    <button id="b">登录</button>
</form>
</body>
<script type="text/javascript">
    $(function(){
        $("#signupForm").validate({
            onsubmit:true,// 是否在提交是验证
            rules: {
                login_name: {
                    required: true,
                    minlength: 5
                },
                login_password: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                login_name: {
                    required: "请输入用户名",
                    minlength: "用户名至少为5位"
                },
                login_password: {
                    required: "请输入密码",
                    minlength: "密码长度最少为5位"
                }
            },
            submitHandler: function() { 
            $.ajax({
                url:"${pageContext.request.contextPath}/login",
                method:"post",
                data:$('#signupForm').serialize(),
                dataType:'json',
                success:function(ret){
                    if(ret.status=='ok'){
                        $("#loginError").html("登录成功！");
                        var href = '${pageContext.request.contextPath}/jsp/index.jsp';
                        window.top.location.href = href;
                    }else if(ret.status=='userNameOrPwdError'){
                        $("#loginError").html("用户名或密码错误！");
                    }
                }
            });
            }
        })
    });
</script>
</html>