1. 程式人生 > >案例:非同步校驗使用者名稱

案例:非同步校驗使用者名稱

一、頁面準備

<body>
   	<table border="1" width="500">
   		<tr>
   			<td>使用者名稱:</td>
   			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
   		</tr>
   		<tr>
   			<td>密碼</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>郵箱</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>簡介</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td colspan="2"><input type="submit" value="註冊"></td>
   		</tr>
   	</table>
</body>

二、Servlet程式碼

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	try {
		request.setCharacterEncoding("UTF-8");
		
		// 1. 檢測是否存在
		String name = request.getParameter("name");
	
		UserDao dao = new UserDaoImpl();
		boolean isExist = dao.checkUserName(name);
			
		System.out.println(isExist);
		// 2. 通知頁面,到底有還是沒有。
		if (isExist) {
			response.getWriter().println(1);// 存在使用者名稱
		} else {
			response.getWriter().println(2);// 不存在使用者名稱
		}
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

三、Dao程式碼

public class UserDaoImpl implements UserDao {

	@Override
	public boolean checkUserName(String name) throws SQLException {

		QueryRunner runner = new QueryRunner(JDBCUtil.getDataSource());
		String sql = "select count(*) from t_user where username =?";
		Long result = (Long) runner.query(sql, new ScalarHandler(), name);
		System.out.println(result);
		return result > 0;

	}

}

四、JSP頁面顯示

1、get方式

function checkUserName(){
    var request = ajaxFunction();
	var name = document.getElementById("name").value;
	request.onreadystatechange=function(){
		 if (request.readyState==4 && request.status==200){
			 var result = request.responseText;
			 if(result == 1){
				 document.getElementById("span1").innerHTML="<font color='red'>使用者名稱已被佔用</font>";
			 }else{
				 document.getElementById("span1").innerHTML="<font color='green'>使用者名稱可以使用</font>";
			 }
		    
		 }
	}
	request.open("GET", "RegisterServlet?name="+name, true);
	request.send();


	字串比較: 


	 if(result == '1'){
				 document.getElementById("span1").innerHTML="<font color='red'>使用者名稱已被佔用</font>";
			 }else{
				 document.getElementById("span1").innerHTML="<font color='green'>使用者名稱可以使用</font>";
			 }
}

1、Post方式

function checkUserName() {
	//獲取輸入框的值 document 整個網頁
	var name = document.getElementById("name").value; // value  value() val val()
	alert("name=" + name);
	//1、建立物件
	var request = ajaxFunction();
	//2、傳送請求
	request.open("POST", "/AjaxDemo/CheckUserNameServlet", true);
		
	//註冊狀態改變監聽,獲取伺服器傳送過來的資料
	request.onreadystatechange=function() {
		if (request.readyState == 4 && request.status == 200) {
			var data = request.responseText;
			if (data == 1) {
				document.getElementById("span1").innerHTML = "<font color='red'>使用者名稱已存在!</font>";
			} else {
				document.getElementById("span1").innerHTML = "<font color='green'>使用者名稱可用!</font>";
			}
		}
	}		
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send("name=" + name);
}