版权声明:《==study hard and make progress every day==》 https://blog.csdn.net/qq_38225558/article/details/83720894
前台页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>验证用户名</title>
<script type="text/javascript">
// 创建ajax对象
function createAjax(){
try{
return new XMLHttpRequest();// 非IE6浏览器,主流浏览器支持的
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器以下创建的核心对象
}
}
// 判断用户名是否正确的方法
function checkName(obj){
/*
内置属性: 直接.获取到值
自定义属性:通过getAttribute("属性名")来获取对应的值
*/
if(!obj.value){
document.getElementById("username").innerHTML="用户名必填!";
return false;
}
// 1.创建ajax核心对象
var ajax = createAjax();
// 2.以异步方式发出get请求 true:异步 false:同步
ajax.open("get","/zq/checkName?username="+obj.value,true);
// 3.监听ajax状态,http响应状态 (注意:必须放在send之前执行)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){ //ajax已经处理完成并且http响应状态是200
//ajax.responseText 返回过来是纯字符串
if(ajax.responseText=='true'){
document.getElementById("username").innerHTML="";
document.getElementById("btn").disabled = false;
}else{
document.getElementById("username").innerHTML="用户名已存在...";
document.getElementById("btn").disabled = true;
}
}
}
// 4.发出请求
ajax.send();
}
</script>
</head>
<body>
<form action="">
<input type="text" onblur="checkName(this);" name="username"><span id="username" style="color:red"></span><br/>
<input type="text" name="password"><br/>
<input type="button" id="btn" value="提交">
</form>
</body>
</html>
后台Controller:
/**
* 验证用户名:
* 注意:异步技术必须加@ResponseBody
* @author 郑清
*/
@Controller
public class _02CheckNameController {
@RequestMapping("/checkName")
@ResponseBody
public boolean checkName(String username) {
System.out.println("用户名:"+("admin".equals(username) ? true : false));
return "admin".equals(username) ? true : false;
}
}
运行效果: