溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用Ajax怎么驗證用戶名是否存在，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
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
//創建對象
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.創建對象
var request=ajaxFunction();
//2.發送請求
request.open("POST","/StudyWeb/CheckUserNameServlet",true);//true表示異步提交
//注冊狀態改變監聽，獲取服務器傳送過來的數據
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發送過來的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怎么驗證用戶名是否存在就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
