您的位置：首页 > 编程语言 > Java开发

spring mvc+spring+mybatis+ajax实现登录验证

2015-12-25 13:49 696 查看 
<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 © 2015.Company name All rights reserved.</p>
</div>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航