效果:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//对用户名进行验证
function a1() {
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a3.do",
data:{"name":$("#name").val()},
success: function (data) {
if(data.toString()=='ok'){//正确则为绿的否则为红色
$('#userInfo').css("color","green");
}else{
$('#userInfo').css("color","red");
}
$('#userInfo').html(data);//将json内容显示在span内
console.log(data)
}
})
}
function a2() {//道理同a1
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a3.do",
data:{"password":$("#password").val()},
success: function (data) {
if(data.toString()=='ok'){
$('#pwdInfo').css("color","green");
}else{
$('#pwdInfo').css("color","red");
}
console.log(data.toString())
$('#pwdInfo').html(data);
}
})
}
</script>
</head>
<body>
<p>
用户名:
<input type="text" id="name" onblur="a1() "><span id="userInfo"></span>
</p>
<p>
密码:
<input type="text" id="password" onblur="a2() "><span id="pwdInfo"></span>
</p>
</body>
</html>