小編給大家分享一下如何利用Ajax檢測(cè)用戶名是否被占用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為崇州企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì),崇州網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
采用Ajax實(shí)現(xiàn)用戶名驗(yàn)證
使用jQuery給出提示信息
用戶注冊(cè)的時(shí)候,使用Ajax實(shí)現(xiàn)檢測(cè)用戶名是否已經(jīng)被注冊(cè)過(guò),很多細(xì)節(jié)沒(méi)有實(shí)現(xiàn),給大家做個(gè)簡(jiǎn)單普及。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用戶注冊(cè)頁(yè)面</title> <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); } } function validate(account){ createXMLHttpRequest(); xmlHttp.open("Get","ValidateServlet?account="+account,true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var text = xmlHttp.responseText; if(text=="true"){ //document.getElementById("msg").innerHTML = "該手機(jī)號(hào)已經(jīng)被注冊(cè)過(guò)"; $("#msg").text("該手機(jī)號(hào)已經(jīng)被注冊(cè)"); $("#sub").attr("disabled","true");//添加disabled屬性,讓按鈕不可用 }else{ //document.getElementById("msg").innerHTML = ""; $("#msg").text(""); $("#sub").removeAttr("disabled");//移除disabled屬性,讓按鈕可用 } }else{ alert("請(qǐng)求失敗,錯(cuò)誤碼="+xmlHttp.status); } } } function checkInfo(){ var account = $("#account").val(); var pwd1 = $("#pwd1").val(); var pwd2 = $("#pwd2").val(); if(account==""||account==null){ $("#msg").text("賬號(hào)不能為空"); $("#sub").attr("disabled","true"); return false; } if(pwd1==""||pwd1==null||pwd2==""||pwd2==null||pwd1!=pwd2){ $("#info").text("密碼不能為空或者兩次密碼不一致"); $("#sub").attr("disabled","true"); return false; } $("#msg").text(""); $("#info").text(""); $("#sub").removeAttr("disabled"); } function submit(){ checkInfo(); $("#reg").submit(); } </script> </head> <body> <form id="reg" name="reg" action="RegisterServlet" method="post"> 賬號(hào):<input type="text" name="account" id="account" onblur="validate(this.value);"> <span id="msg" >請(qǐng)輸入手機(jī)號(hào)</span><br> 密碼:<input type="password" id="pwd1" name="password1" onblur="checkInfo();"><br> 確認(rèn)密碼:<input type="password" id="pwd2" name="password2" onblur="checkInfo();"> <span id="info" ></span><br> <input type="button" id="sub" value="提交" onclick="submit();"> </form> </body> </html>
下面是ValidateServlet模擬實(shí)現(xiàn),沒(méi)有做真正的數(shù)據(jù)庫(kù)表數(shù)據(jù)檢測(cè),大家自行完成。
package com.ambow.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/ValidateServlet") public class ValidateServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ValidateServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter pw = response.getWriter(); String account = request.getParameter("account"); System.out.println("account"+account); if("123".equals(account)) { pw.print("true"); }else { pw.print("false"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
以上是“如何利用Ajax檢測(cè)用戶名是否被占用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享題目:如何利用Ajax檢測(cè)用戶名是否被占用
網(wǎng)頁(yè)地址:http://muchs.cn/article32/pppopc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)