Ajax使用原生態(tài)JS驗(yàn)證用戶名是否存在
本文實(shí)例為大家分享了JS驗(yàn)證用戶名是否存在的具體代碼,供大家參考,具體內(nèi)容如下
直接上代碼:
reg_ajax.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax請(qǐng)求servlet實(shí)現(xiàn)用戶名是否存在驗(yàn)證</title> </head> <body> <script type="text/javascript"> /** * 得到XMLHttpRequest對(duì)象 */ function getajaxHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的瀏覽器不支持AJAX!"); return false; } } } return xmlHttp; } /** * 發(fā)送ajax請(qǐng)求 * url--請(qǐng)求到服務(wù)器的URL * methodtype(post/get) * con (true(異步)|false(同步)) * functionName(回調(diào)方法名,不需要引號(hào),這里只有成功的時(shí)候才調(diào)用) * (注意:這方法有二個(gè)參數(shù),一個(gè)就是xmlhttp,一個(gè)就是要處理的對(duì)象) */ function ajaxrequest(url, methodtype, con, functionName) { //獲取XMLHTTPRequest對(duì)象 var xmlhttp = getajaxHttp(); //設(shè)置回調(diào)函數(shù)(響應(yīng)的時(shí)候調(diào)用的函數(shù)) xmlhttp.onreadystatechange = function() { //這個(gè)函數(shù)中的代碼在什么時(shí)候被XMLHTTPRequest對(duì)象調(diào)用? //當(dāng)服務(wù)器響應(yīng)時(shí),XMLHTTPRequest對(duì)象會(huì)自動(dòng)調(diào)用該回調(diào)方法 if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { functionName(xmlhttp.responseText); } } }; //創(chuàng)建請(qǐng)求 xmlhttp.open(methodtype, url, con); //發(fā)送請(qǐng)求 xmlhttp.send(); } function checkUsername() { var username=document.getElementById('username').value; //調(diào)用ajax請(qǐng)求Servlet ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse); } function ckUsernameResponse(responseContents){ if (responseContents=='yes') { document.getElementById('usernameMsg').innerHTML="<font color='red'>用戶名存在</font>"; document.getElementById('username').style="background-color: red"; }else{ document.getElementById('usernameMsg').innerHTML=""; document.getElementById('username').style="background-color: white"; } } </script> <table> <tr> <td>用戶名</td> <td><input type="text" id="username" onblur="checkUsername()"/></td> <td><div id="usernameMsg"></div></td> </tr> <tr> <td>郵箱</td> <td><input type="text" id="email" /></td> <td><div id="emailMsg"></div></td> </tr> </table> </body> </html>
請(qǐng)求的Servlet代碼如下,UserServlet.java
package cn.bestchance.servlet; import java.io.IOException; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class UserServlet */ @WebServlet("/userServlet") public class UserServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username=request.getParameter("username"); //這里使用ArrayList代替從數(shù)據(jù)庫中查詢數(shù)據(jù) ArrayList<String> userList =new ArrayList<String>(); userList.add("admin"); userList.add("test"); userList.add("chance"); //驗(yàn)證用戶名是否存在 boolean flag = false; for (String string : userList) { if(string.equals(username)){ flag = true; break; } } if(flag){//用戶名已存在 response.getWriter().print("yes"); }else{//用戶名不存在 response.getWriter().print("no"); } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05符合W3C網(wǎng)頁標(biāo)準(zhǔn)的iframe標(biāo)簽的使用方法
符合W3C網(wǎng)頁標(biāo)準(zhǔn)的iframe標(biāo)簽的使用方法...2007-07-07JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03詳解怎么檢測(cè)和防止JavaScript死循環(huán)
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測(cè)和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-11-11完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果,通過設(shè)置定時(shí)器實(shí)現(xiàn)延時(shí)0.5s切換選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript詞法作用域與調(diào)用對(duì)象深入理解
關(guān)于 Javascript 的函數(shù)作用域、調(diào)用對(duì)象和閉包之間的關(guān)系很微妙,關(guān)于它們的文章已經(jīng)有很多,本文做了一些總結(jié),需要的朋友可以參考下2012-11-11JS實(shí)現(xiàn)字符串中去除指定子字符串方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)字符串中去除指定子字符串方法,結(jié)合實(shí)例形式分析了javascript使用字符串替換與分割、聚合兩種子字符串去除相關(guān)操作技巧,需要的朋友可以參考下2018-05-05