JQuery ajax實現註冊時非同步實時檢測使用者名稱是否重名並進行提示
版權宣告:本文為博主原創文章,未經博主允許不得轉載。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;
}
}