第一步：先开发一个servlet 验证用户名是否存在
public class ValidataServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException {
List<String> list = new ArrayList<String>();
list.add("Jack");
list.add("Rose");
list.add("张三");
//设置请求的编码
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
if(list.contains(name)){
//如果已经存在则返回1
response.getWriter().print(1);
}else{
response.getWriter().print(0);
}
}
第二步：开发页面
1.reg.jsp:
type="text/javascript" src="<c:url value='/js/xhr2.js'/>"></script> xhr2.js见ajax续3
<script type="text/javascript"src="<c:url value='/js/reg.js'/>"></script>
<script type="text/javascript">
//什么项目的根，让js可以访问
varpath = "<c:url value='/'/>";
</script>
</head>
<body>
name:<input type="text" onblur="_val(this);" id="name"><label id="msg"></label>
<br/>
pwd : <input type="text">
</body>
</html>
2.reg.js:
function _val(txt){
if(txt.value==""){//用户没有输入任何值则不去调用ajax
return;
}
//调用ajax
var ajax = new Ajax();
ajax.post({
url:path+"ValidataServlet",
param:'name='+txt.value,
succ:function(data){
if(data==1){
document.getElementById("msg").innerHTML="请你换一个名";
}else{
document.getElementById("msg").innerHTML="你可以使用";
}
}
});
}
以上优化：
页面上的验证是初级的验证，防止重复在存入数据库之前再查询一下数据库
