第一步：先開發一個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="你可以使用";
}
}
});
}
以上優化：
頁面上的驗證是初級的驗證，防止重複在存入數據庫之前再查詢一下數據庫
