Ajax--login

Got my own monster. �

于 2019-03-19 18:47:39 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/DennisRodman_91/article/details/88669739

版权

Usercontroller.java

package cn.wyt.ajax;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {
	@RequestMapping("/login.do")
	public String ShowLogin(){
		return "login";
	}
	@RequestMapping(value="/handleLogin.do",
			method=RequestMethod.POST)
	@ResponseBody
	public String HandleLogin(String username,String password){
		if("wyt".equals(username)&&"123".equals(password)){
			return "1";
		}else{
			return "0";
		}
	}
	@RequestMapping(value="/check_username.do",
			method=RequestMethod.POST)
	@ResponseBody
	public String checkUsername(String username){
		if("wyt".equals(username)){
			return "{\"state\":\"1\",\"message\":\"用户名正确\"}";
		}else{
			return "{\"state\":\"0\",\"message\":\"用户名错误\"}";
		}
		
	}
}


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<html>
<head>
<title>WYT login(TEST)</title>
<script type="text/javascript">
//简化getElementById()
function $(id){
	return document.getElementById(id);
}
//获取getXMLHttpRequest
	function getXMLHttpRequest(){
		
		if(window.getXMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr.ActiveXObject("Microsoft.XMLHttp");
		}
		return xhr;
	}
	function handleLogin(){
		//1.获取XMLHttpRequest
		var xhr = getXMLHttpRequest();
		//2.获取用户数据
		var u = $("username").value;
		var p = $("password").value;
		//3.配置url
		var url = "handleLogin.do"
		var params="username="+u
			+"&password="+ p;
		//4.配置onreadystatechange
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4
					&& xhr.status==200){
				if(xhr.responseText=="1"){
					location.href="index.123123132123132131";
				}else{
					$("message").style.display
					="block";
					$("message").innerHTML
					="登陆失败！";
				}
				}
		
		};
		//5.open();
		xhr.open("POST",url,true);
		//
		xhr.setRequestHeader("content-type",
				"application/x-www-form-urlencoded")
		//6.send();
		xhr.send(params);
	}
	
	
		//清楚/隐藏提示信息
		function clearMessage(){
			$("message").style.display="none";
		}
		//检查用户名
		function checkUsername(){
		//1.获取XMLHttpRequest
		var xhr = getXMLHttpRequest();
		//2.获取用户数据
		var u = $("username").value;
		//3.配置url
		var url = "check_username.do"
		var params="username="+u;
		//4.配置onreadystatechange
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4
					&& xhr.status==200){
				var jsonObj = JSON.parse(
						xhr.responseText);
				var message;
				if(jsonObj.state == "1") {
					message= "<font color='green'>"+jsonObj.message+"</font>";
				}else{
					message= "<font color='red'>"+jsonObj.message+"</font>";
				}
				$("username_hint").innerHTML=message;
			}
		
		};
		//5.open();
		xhr.open("POST",url,true);
		//
		xhr.setRequestHeader("content-type",
				"application/x-www-form-urlencoded")
		//6.send();
		xhr.send(params);
	}
		
</script>
<style type="text/css">
#message{color:#f00;display:none;}
</style>
</head>
<body>
	<form action="handleLogin.do" method="post">
		<h1>测试登陆</h1>
		<p>用户名</p>
		<p><input id="username" type="text" name="username" value="wyt"
			onfocus="clearMessage()" onblur="checkUsername()"/><span id="username_hint"></span></p>
		<p>密码</p>
		<p><input id="password" type="text" name="password" value="123"/></p>
		<p id="message">提示信息</p>
		<p><input onclick="handleLogin()" type="button" value="Sign in"/></p>		
	</form>
</body>
</html>