Ajax校驗(yàn)用戶名是否存在的方法
本文實(shí)例為大家分享了Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼,代碼簡單易懂,非常不錯,需要的朋友可以參考下
jsp頁面
我引入了bootstrap和jQuery
<div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label" style="color: #fff">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="studentName" name="studentName" placeholder="請輸入姓名"> <span id="s_studentName"></span> </div> </div>
register.jsp頁面
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> //頁面加載完成之后 function fun() { //給用戶名綁定blur事件 $("#studentName").blur(function() { //獲取studentName文本框的值 var studentName = $("#studentName").val(); //發(fā)送ajax請求 //期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個(gè)"} // {"userExsit":false,"msg":"此用戶名已存在"} $.get("CheckNameServlet", { "studentName" : studentName }, function(data) { //判斷userExsit鍵的值是否為true var span = $("#s_studentName"); if (data.isExist) { //用戶不存在 span.css("color", "red"); span.html(data.msg); } else { //用戶存在,可以給提示,也可以不給 span.html(""); } },"json"); }); }; fun(); </script>
后臺student文件下的CheckNameServlet頁面
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設(shè)置編碼格式 response.setContentType("text/html;charset=UTF-8"); //獲取前端頁面的值 String name = request.getParameter("studentName"); // 期望服務(wù)器響應(yīng)回的數(shù)據(jù)格式{"isExsit":true,"msg":"此用戶名太受歡迎,請更換一個(gè)"} // {"userExsit":false,"msg":"此用戶名已存在"} // 檢驗(yàn)是否存在該用戶名 try { boolean isExist = StudentService.isExist(name); System.out.println("isExist" + isExist); Map<String, Object> map = new HashMap<>(); // 通知頁面,到底有沒有 if (isExist) { map.put("isExist", true); map.put("msg", "此用戶名太受歡迎,請更換一個(gè)"); } else { map.put("isExist", false); // map.put("msg", "用戶名可用"); } //將map轉(zhuǎn)換為json之前,要導(dǎo)包哦~ // 將map轉(zhuǎn)為json,并傳遞給客戶端 ObjectMapper mapper = new ObjectMapper(); mapper.writeValue(response.getWriter(), map); } catch (SQLException e1) { // TODO Auto-generated catch block e1.printStackTrace(); } }
JDBCDemo的方法的實(shí)現(xiàn)(我沒實(shí)現(xiàn)接口,直接寫的)
public static boolean checkName(String name) throws SQLException { boolean flag = false; String sql = "select * from student_table where student_name=?"; PreparedStatement statement = connection.prepareStatement(sql); statement.setString(1, name); ResultSet set = statement.executeQuery(); 如果存在我輸入的用戶名和數(shù)據(jù)庫表中已有的用戶名相同時(shí) if(set.next()) { flag = true; } return flag; } }
總結(jié):
以上所述是小編給大家介紹的Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼,希望對大家有所幫助。
相關(guān)文章
使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息
新浪的財(cái)金頻道一直感覺做得很好。但由于最近網(wǎng)速慢的緣故,查看股票信息時(shí)網(wǎng)頁老是打不開。這幾天一直在研究ajax,于是用jquery自己做了一個(gè)自動讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁面。2008-11-11Ajax實(shí)現(xiàn)圖片上傳并預(yù)覽功能
這篇文章主要介紹了Ajax實(shí)現(xiàn)圖片上傳并預(yù)覽,需要的朋友可以參考下2018-06-06通過Ajax手動解決WordPress WP-PostViews不計(jì)數(shù)的問題
這篇文章主要介紹了通過Ajax手動解決WordPress WP-PostViews不計(jì)數(shù)的問題的相關(guān)資料,需要的朋友可以參考下2016-01-01使用Ajax實(shí)時(shí)檢測"用戶名、郵箱等"是否已經(jīng)存在
這篇文章主要介紹了使用Ajax實(shí)時(shí)檢測"用戶名、郵箱等"是否已經(jīng)存在,需要的朋友可以參考下2015-01-01AJAX在不同瀏覽器中XMLHttpRequest對象的生成示例
本文為大家介紹下AJAX在不同瀏覽器中XMLHttpRequest對象是怎樣生成的,以方便我們針對不同瀏覽器進(jìn)行測試,感興趣的朋友可以參考下,希望對大家有所幫助2013-07-07基于Ajax技術(shù)實(shí)現(xiàn)考試倒計(jì)時(shí)并自動提交試卷
這篇文章主要介紹了基于Ajax技術(shù)實(shí)現(xiàn)考試倒計(jì)時(shí)并自動提交試卷 的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06javascript請求servlet實(shí)現(xiàn)ajax示例(分享)
下面小編就為大家?guī)硪黄猨avascript請求servlet實(shí)現(xiàn)ajax示例(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06