在index.jsp输入:
<h2>案例一的实现</h2>
<a href="${pageContext.request.contextPath}/al/demo1.jsp">校验用户名</a>
在demo1输入:
<%@ 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>Inserttitle here</title>
<script src="${pageContext.request.contextPath}/al/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
$("#username").blur(function(){
if($.trim($("#username").val())!=""){
//通过jq的ajax完成数据交互--文本框的内容不为""才去做ajax
var url = "${pageContext.request.contextPath}/al1";
var params = "username="+$("#username").val();
$.post(url,params,function(d){
if(d>0){
//不能用
$("#usename_msg").html("用户名已被占用").css("color","red");
//禁用按钮
$("#sub").prop("disabled",true);
}else{
//能用
$("#usename_msg").html("用户名可以使用").css("color","blue");
$("#sub").prop("disabled",false);
}
})
}
})
})
</script>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>用户名</td>
<td><input type="text"id="username" name="username" > </td>
<td><span id="usename_msg"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" > </td>
<td></td>
</tr>
<tr>
<td colspan="3"><inputtype="submit" id=sub ></td>
</tr>
</table>
</form>
</body>
</html>