Ajax实现Test_Shop_SSM项目登录的功能

最新推荐文章于 2020-05-31 16:44:29 发布

Love_MinJuan

最新推荐文章于 2020-05-31 16:44:29 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/Love_MinJuan/article/details/106430896

版权

前端代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<title>工学院</title>
		<meta content="text/html; charset=UTF-8"  http-equiv="Content-Type"/>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/login.css" />
	</head>
	<body>	
	<div id="wrap">
	
	  <div id="header">
	    <div class="topbox">
	      <div class="logo"><img src="${pageContext.request.contextPath }/images/logo.png" width='200px' /></div>
	    </div>
	  </div>
	  
	  <div id="mainer">
	  
	    <div class="login_main">
	    
	      <div class="login_img"></div>
	      <div class="login_box" style='height:450px'>
	        <div class="login_tit">用户登录</div>
	          <form method="post" action="${pageContext.request.contextPath }/client/login.do" id="form1">
	            <div class="item">       
	                <input onblur="nameBlur()" name="username" type="text" id="txtUserName" class="input input1" placeholder="账号"  />
	                <i class="input-username"></i>
	            </div><div id="nameInfo"></div>
	            <div class="item item2">
	                <input onblur="passwordBlur()" name="password" type="password" id="txtPassword" class="input input2" placeholder="密码" />
	                <i class="input-password"></i>
	            </div><div id="passwordInfo"></div>
	            <!-- <div class="item item2">
	                <input type="checkbox" name="rememberme" value='ok' id="" />
	               		 记住我[一周]
	            </div> -->
	             <p style='color:red' id="errorMsg">
					${errorMsg } 
	          	</p>
	            <div class="item">
	               
	            <input type="button" onclick="ajaxLogin()" name="btnLogin" value="登录" id="btnLogin" class="btn" />
				
				<a href="${pageContext.request.contextPath }/user/userRegister.jsp">
				<input style='margin-top:10px' type="button" name="btnLogin" value="注册" id="btnRegist" class="btn" />
				</a>
	            </div>
	            
	          </form>
	          
	      </div>
	      
	    </div>
	  
	  </div>
	  
	  <div id="footer">
	    <div class="footbox"><a href="">北京打造前程集团</a></div>
	  </div>
	
	</div>
	</body>
	
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>
	<script type="text/javascript">
	//Ajax账号密码验证
		function ajaxLogin(){
			//获取输入参数
			var cliName = $("#txtUserName").val();
			var cliPassword = $("#txtPassword").val();
			//输入判断
			if(cliName=="" ||cliPassword==""){
				$("#errorMsg").html("账号密码不能为空！");
			}else{
				//执行ajax
				$.ajax({
					url:"${pageContext.request.contextPath }/client/ajaxLogin.do",
					type:"POST",
					data:{"cliName":cliName,"cliPassword":cliPassword},
					success:function(data){
						console.log("data:"+data);
						//判断用户名
						if (data == "true"){//若用户名存在且密码正确
							window.location.href='${pageContext.request.contextPath }/product/ProductByPageController.do';
						}else if (data == "false"){//密码错误，登录失败
							$("#errorMsg").html("密码错误！");
						}else if (data == "nofound"){//用户名不存在
							$("#errorMsg").html("账号不存在！");
						}
					},
					error:function(xhr, textStatus, errorThrown){
						/*错误信息处理*/
						console.log("进入error---");
						console.log("状态码："+xhr.status);
						console.log("状态:"+xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成
						console.log("错误信息:"+xhr.statusText );
						console.log("返回响应信息："+xhr.responseText );//这里是详细的信息
						console.log("请求状态："+textStatus);
						console.log(errorThrown);
						console.log("请求失败");
					},
					dataType:"json"
				});
			}
		}
	
	//账号动态验证
		function nameBlur(){
			//获取输入参数
			var cliName = $("#txtUserName").val();
			if(cliName==""){
				$("#nameInfo").html("<a style='color:red'>请输入账号！</a>");
			}else{
				//清空报错信息
				$("#nameInfo").html("");
			}
		}
	//密码动态验证
		function passwordBlur(){
			//获取输入参数
			var cliPassword = $("#txtPassword").val();
			if(cliPassword==""){
				$("#passwordInfo").html("<a style='color:red'>请输入密码！</a>");
			}else{
				//清空报错信息
				$("#passwordInfo").html("");
			}
		}
	</script>
	
</html>

后端代码：

package com.rj182.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.rj182.entity.Client;
import com.rj182.service.ClientService;
import com.rj182.util.MD5;

@Controller
@RequestMapping("/client")
public class ClientController {

	@Autowired
	private ClientService clientService;
	
	//Ajax登录
	@RequestMapping("/ajaxLogin")
	@ResponseBody
	public String ajaxLogin(String cliName,String cliPassword,HttpServletResponse response,HttpSession session) throws IOException {
		//初始化变量
		String msg = "nofound";
		//用户名查询
		List<Client> list = clientService.login(cliName, null);
		//判断用户名
		if (list.size() > 0) {//若用户名存在
			//获取密码
			Client client = list.get(0);
			String cliPasswordOrl = client.getCliPassword();
			String cliSalt = client.getCliSalt();
			//密码拼接
			String cliSaltpassword = cliSalt+cliPassword;
			//MD5加密前台参数
			String md5Digest = MD5.getMD5Digest(cliSaltpassword);
			//判断密码
			if (cliPasswordOrl.equals(md5Digest)) {
				//密码正确，获取用户名
				String cliRealname = client.getCliRealname();
				//存入session数据
				session.setAttribute("realName",cliRealname);
				//return JSON流"true"
				return "true";
			}
			//密码错误，登录失败
			//return JSON流"false"
			return"false";
		}
		//用户名不存在
		//return JSON流"nofound"
		return msg;
	}
}

Love_MinJuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现Test_Shop_SSM项目登录的功能

前端代码：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %><!DOCTYPE html><html> <head> <title>工学院</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <link rel
复制链接

扫一扫