Ajax驗證用戶名是否存在的實例代碼
jsp頁面
<head> <script type="text/javascript" src="js/register.js"></script> </head> <table> <td>用戶名:</td> <td> <input type="text" name="r_name" id="r_name" onblur="CheckUserName()"> <span id="span01"></span> </td> </table>
js文件夾下的register.js
//創(chuàng)建對象 function ajaxFunction(){ var xmlHttp; try{ // 適用于IE7+, Firefox, Chrome, Opera, Safari xmlHttp=new XMLHttpRequest(); } catch(e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ // 適用于IE6, IE5 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ xmlHttp=false; } } } return xmlHttp; } var flag=ture; function CheckUserName(){ //獲取jsp頁面輸入的值 var name=document.getElementById("r_name").value; if(name==""||name==null){ document.getElementById("span01").innerHTML="<font color='red'>用戶名不能為空!</font>" flag=false; }else{ //1.創(chuàng)建對象 var request=ajaxFunction(); //2.發(fā)送請求 request.open("POST","/StudyWeb/CheckUserNameServlet",true);//true表示異步提交 //注冊狀態(tài)改變監(jiān)聽,獲取服務器傳送過來的數據 request.onreadystatechange=function(){ //readyState==4表示請求已經完成,且響應已就緒。status==200表示“OK” if(request.readyState==4 && request.status==200){ var data=request.responseText;//獲取CheckUserNameServlet中response中存儲的值 if(data == 1){ document.getElementById("span01").innerHTML="<font color='red'>用戶名已存在!</font>" flag=false; }else{ document.getElementById("span01").innerHTML="<font color='green'>√</font>" flag=true; } } } //如果是post方式帶數據,那么這里要添加頭,說明提交的數據類型是一個經過url編碼的form表單數據 request.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8"); //帶數據過去,在send方法里填寫表單數據 request.send("name="+name); } return flag; }
后臺StudyWeb項目下的CheckUserNameServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //獲取ajax發(fā)送過來的name值 String r_name=request.getParameter("name"); try { //檢驗是否存在該用戶名 boolean isExist=userService.CheckUserName(r_name); System.out.println("isExist"+isExist); //通知頁面,到底有沒有 if(isExist){ response.getWriter().println(1);//存在用戶名 }else{ response.getWriter().println(2);//不存在該用戶 } } catch (Exception e) { e.printStackTrace(); } }
UserDaoImpl中方法的實現
public boolean CheckUserName(String u_name) { boolean flag=false; String sql="select u_id,u_name,u_password,u_email,u_phone from user where u_name=?"; conn=super.getConnection(); try { pstmt=conn.prepareStatement(sql); pstmt.setString(1,u_name); rs=pstmt.executeQuery(); //如果存在我輸入的用戶名和數據庫表中已有的用戶名相同時 if(rs.next()){ flag=true; } } catch (SQLException e) { e.printStackTrace(); }finally{ super.closeAll(conn, pstmt, stmt, rs); } return flag; }
總結
以上所述是小編給大家介紹的Ajax驗證用戶名是否存在的實例代碼,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言小編會及時回復大家的!
上一篇:不使用XMLHttpRequest對象實現Ajax效果的方法小結
欄 目:AJAX相關
下一篇:Ajax返回值類型與用法實例分析
本文標題:Ajax驗證用戶名是否存在的實例代碼
本文地址:http://mengdiqiu.com.cn/a1/AJAXxiangguan/11277.html
您可能感興趣的文章
- 01-11ajax請求后臺得到json數據后動態(tài)生成樹形下拉框的方法
- 01-11layui的checbox在Ajax局部刷新下的設置方法
- 01-11ajax獲得json對象數組 循環(huán)輸出數據的方法
- 01-11解決ajax請求后臺,有時收不到返回值的問題
- 01-11詳談ajax返回數據成功 卻進入error的方法
- 01-11解決AJAX返回狀態(tài)200沒有調用success的問題
- 01-11快速解決ajax返回值給外部函數的問題
- 01-11Ajax實現動態(tài)顯示并操作表信息的方法
- 01-11ajax實現從后臺拿數據顯示在HTML前端的方法
- 01-11ajax動態(tài)查詢數據庫數據并顯示在前臺的方法


閱讀排行
本欄相關
- 01-11layui的checbox在Ajax局部刷新下的設置方
- 01-11ajax請求后臺得到json數據后動態(tài)生成樹
- 01-11ajax獲得json對象數組 循環(huán)輸出數據的
- 01-11解決ajax請求后臺,有時收不到返回值的
- 01-11詳談ajax返回數據成功 卻進入error的方
- 01-11解決AJAX返回狀態(tài)200沒有調用success的問
- 01-11快速解決ajax返回值給外部函數的問題
- 01-11Ajax實現動態(tài)顯示并操作表信息的方法
- 01-11ajax實現從后臺拿數據顯示在HTML前端的
- 01-11ajax動態(tài)查詢數據庫數據并顯示在前臺
隨機閱讀
- 01-10SublimeText編譯C開發(fā)環(huán)境設置
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10C#中split用法實例總結
- 01-11ajax實現頁面的局部加載
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05dedecms(織夢)副欄目數量限制代碼修改
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery