spring mvc+spring+mybatis+ajax實現登錄驗證

<h1>Spring Mvc+Spring+Mybatis+Ajax 實現異步登錄的例子,和大家分享一下。</h1><div>login.js代碼:</div><pre name="code" class="javascript">$(document).ready(function(){
      $("#tname").blur(function(){
    	
         $.ajax({
        	 type:"post",
        	 url:"checklogin.do",
        	 data:{tname:$("#tname").val()},
        	 dataType:"text",
        	 beforeSend:function(){
        		 $("#btn").val("正在提交,請稍等...");
        		 }, 
        	 success:function(data){
                 //判斷輸入是否成功,成功則跳轉   
        		 if("用戶名可用!"==data){
        			 $("#tn").addClass("tn");
        			 $("#btn").val("Login");
        			
        		 }else{
        			 $("#tn").removeClass("tn").addClass("tnx");
        			 $("#btn").val("Login"); 
        			 
        			 return false;
        		 }        		           
            }   
         });
 		
      });
      $('#btn').click(function(){
    	  if($("#tname").val()=="請輸入用戶名" || $("#tname").val()==""||$("#password").val()=="請輸入密碼"|| $("#password").val()==""){
    		  $("#msg").html("用戶名不能爲空!");
 			 return false;
 		 }else{
 			$.ajax({
 	        	 type:"post",
 	        	 url:"login.do",
 	        	 data:{tname:$("#tname").val(),tpwd:$("#password").val()},
 	        	 dataType:"text",
 	        	 beforeSend:function(){
 	        		 $("#btn").val("正在提交,請稍等...");
 	        	 }, 
 	        	 success:function(data){
 	                 //判斷輸入是否成功,成功則跳轉   
 	        		 if("用戶名可用!"==data){
 	        			 window.location.href="index.jsp";	 
 	        		 }else{
 	        			 $("#key").addClass("key");
 	        			$("#btn").val("Login");
 	        			 return false;
 	        		 }        		           
 	            }   
 	         });
 		 }
      })
  });

login.java代碼:

<pre name="code" class="java">package com.bky.controller;


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


import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import org.jboss.weld.servlet.ServletApiAbstraction;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;


import com.bky.model.Add;
import com.bky.service.BaseService;


@Controller
public class Login {
	@Autowired
	BaseService baseService;
	@RequestMapping("checklogin")	
	public String checkLogin(Add adds,HttpServletRequest request, HttpServletResponse response,Model model) throws IOException {      
		//獲取頁面傳過來的賬號
		String tname=adds.getTname();
		adds.setTname(tname);
		String mes="用戶名可用!";
		Add add=baseService.selectByName(adds);
		//判斷用戶名是否正確,正確則登錄,錯誤則提示重新輸入
		if(add!=null){
			response.setContentType("text/plain;charset=UTF-8");
			response.getWriter().write(mes);
		}else{
			mes="用戶名不正確!";
			//設置字符集
			response.setContentType("text/plain;charset=UTF-8");
			response.getWriter().write(mes);
		}
		return null;
	 }
	@RequestMapping("login")	
	public String Login(Add adds,HttpServletRequest request, HttpServletResponse response,Model model) throws IOException {
		  
	     //獲取頁面傳過來的賬號和密碼
		String tname=adds.getTname();
		String tpwd=adds.getTpwd();
		adds.setTname(tname);
		adds.setTpwd(tpwd);
		String mes="用戶名可用!";
		Add add=baseService.selectByNP(adds);
		 //判斷用戶名及密碼是否正確,正確則登錄,錯誤則提示重新輸入
		if(add!=null){
			//設置字符集
			response.setContentType("text/plain;charset=UTF-8");
			response.getWriter().write(mes);
		}else{
			mes="用戶名或密碼不正確!";
			response.setContentType("text/plain;charset=UTF-8");
			response.getWriter().write(mes);
		}
		return null;
	 }
}

login.jsp代碼:

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="<%=basePath%>">
    
   <title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />	
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
  </head>
  
  <body>
    <script>$(document).ready(function(c) {
	$('.close').on('click', function(c){
		$('.login-form').fadeOut('slow', function(c){
	  		$('.login-form').remove();
		});
	});	  
});
</script>

	<h1>登錄</h1>
	<div class="login-form">
		<div class="close"> </div>
		<div class="head-info">
			<label class="lbl-1"> </label>
			<label class="lbl-2"> </label>
			<label class="lbl-3"> </label>
		</div>
		<div class="clear"> </div>
		<div class="avtar"><img src="images/avtar.png" /></div>
		<form>			
			<div id="tn"><input type="text"    id="tname" name="username" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '請輸入用戶名';}"></div>
			<div id="key"><input type="password" id="password" name="password"  onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '請輸入密碼';}"></div>
		</form>
		<div class="signin"><input type="submit" value="Login" id="btn"></div>
	</div>
	<div class="copy-rights">
		<p>Copyright &copy; 2015.Company name All rights reserved.</p>
	</div>
  </body>
</html>



發佈了35 篇原創文章 · 獲贊 16 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章