版權宣告：本文為博主原創文章，未經博主允許不得轉載。https://blog.csdn.net/qq_40348465/article/details/83217840

  此處主要是在JAVAWeb專案中利用JQuery AJAX中的$.get()方法以及input標籤的兩個事件：onkeyup和onblur，實現檢測使用者名稱是否重名並進行提示。

  $.get(URL,data,function(data,status,xhr),dataType);

       URL:請求的URL,必填項

       function(data,status,xhr):請求成功時執行的函式，非必填項

       dataType:規定伺服器響應的資料型別，非必填項

 onkeyup:當鍵盤按鍵被鬆開時觸發的事件

 onblur:當input失去焦點時觸發的事件（此處主要用它來隱藏提示語，可不用）

效果圖展示：

             1.初始狀態，沒有提示語

          2.當用戶輸入使用者名稱時（輸入一個數據庫中暫未存在的使用者名稱），觸發onkeyup事件，進行ajax操作

          3.當用戶輸入一個在資料庫中已存在的使用者名稱時，同樣觸發onkeyup事件，進行ajax操作

        4.當用戶重新輸入一個數據庫中不存在的使用者名稱時，再次觸發onkeyup事件，進行ajax操作

       5.當焦點離開該input時，隱藏掉提示語（此處為觸發onblur事件，該事件可根據具體需求確定是否設定）

   1.HTML程式碼

<input type="text" name="registerName" id="registerName" placeholder="設定您的使用者名稱">
						<span id="tishi1"></span>

  2.引入JQuery檔案

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

 3.JQuery AJAX程式碼  （獲取值，非同步傳輸資料，控制提示語標籤的隱藏和展示）

<script>
	//先將提示展示出來
	$("#tishi1").show();

	$(function() {
	//當鍵盤按鍵被鬆開時觸發事件:通過AJAX將input中的資料傳遞給後端，在後端驗證是否已存在該使用者名稱
		$("#registerName").keyup(
				function() {
					var registerName = $(this).val();
					registerName = $.trim(registerName);
					if (registerName != "") {
						var url = "CheckRegeister.do?";
						registerName = "registerName=" + registerName;
						url = url + registerName;
						//$.get()方法能夠返回一個JQuery XMLHttpRequest物件
						var jqxhr = $.get(url, callback);
						//若執行JQuery出現錯誤則提示錯誤資訊
						//在JQuery3.0以後需要用done()、fail()、alwayls()代替success()、error()、complete();
						jqxhr.fail(function(xhr, error, throwerror) {
							alert("error" + xhr.status + " error=" + error
									+ " throwerror:" + throwerror);
						});
					}
				});
		//當輸入註冊名的輸入框失去焦點後就先隱藏提示語,這個隱藏提示語可根據具體需求決定是否隱藏
		$("#registerName").blur(function cls() {
			$("#tishi1").hide();
		});
	});
	//ajax的回撥函式
	function callback(data, status) {
		$("#tishi1").show();
		$("#tishi1").html(data);
	}
</script>

 4.Servlet檔案程式碼（呼叫Service層介面，查詢該使用者名稱是否存在，返回結果）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.取值
		String registerName =request.getParameter("registerName");
		 //2.判斷，此處用於判斷是否已存在該使用者
	   IUserService userService = new UserServiceImp();
	   isExist = userService.userAccountIsExist(registerName);
	   System.out.println("registerName"+registerName);
	   request.getSession().setAttribute("REGISTERMSG", "");
	  //3.返回結果
	      if(isExist) {
	    	  response.getWriter().print("<font color='red'>抱歉，該使用者名稱已被註冊，請重新設定</font>"); 
	      }else {
	    	  response.getWriter().print("<font color='green'>恭喜，該使用者名稱可用</font>"); 
	      }
	}

  5.資料庫查詢，此處我採用的是DBUtils(封裝了JDBC的程式碼，簡化了DAO層的操作)，僅供參考，可自由發揮

	@Override
	public boolean accountIsExist(String account) {
		User user = null;
		conn = DataBaseHelper.getConn();
		ResultSetHandler<User> rsh = new BeanHandler<User>(User.class);	
		String sql = "SELECT * FROM user WHERE account=?";
		try {
	       user =  run.query(conn,sql,rsh,account);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				DbUtils.close(conn);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(user!=null) {
			return true;
		}else {
			return false;
		}
	}