文章詳情頁(yè)
Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼
瀏覽：6日期：2022-06-11 10:33:52
jsp頁(yè)面
<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)建對(duì)象
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頁(yè)面輸入的值
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)建對(duì)象
var request=ajaxFunction();
//2.發(fā)送請(qǐng)求
request.open("POST","/StudyWeb/CheckUserNameServlet",true);//true表示異步提交
//注冊(cè)狀態(tài)改變監(jiān)聽，獲取服務(wù)器傳送過來的數(shù)據(jù)
request.onreadystatechange=function(){
//readyState==4表示請(qǐng)求已經(jīng)完成，且響應(yīng)已就緒。status==200表示“OK”
if(request.readyState==4 && request.status==200){
var data=request.responseText;//獲取CheckUserNameServlet中response中存儲(chǔ)的值
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方式帶數(shù)據(jù)，那么這里要添加頭，說明提交的數(shù)據(jù)類型是一個(gè)經(jīng)過url編碼的form表單數(shù)據(jù)
request.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
//帶數(shù)據(jù)過去，在send方法里填寫表單數(shù)據(jù)
request.send("name="+name);
}
return flag;
}
后臺(tái)StudyWeb項(xiàng)目下的CheckUserNameServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//獲取ajax發(fā)送過來的name值
String r_name=request.getParameter("name");
try {
//檢驗(yàn)是否存在該用戶名
boolean isExist=userService.CheckUserName(r_name);
System.out.println("isExist"+isExist);
//通知頁(yè)面，到底有沒有
if(isExist){
response.getWriter().println(1);//存在用戶名
}else{
response.getWriter().println(2);//不存在該用戶
}
} catch (Exception e) {
e.printStackTrace();
}
}
UserDaoImpl中方法的實(shí)現(xiàn)
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();
//如果存在我輸入的用戶名和數(shù)據(jù)庫(kù)表中已有的用戶名相同時(shí)
if(rs.next()){
flag=true;
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
super.closeAll(conn, pstmt, stmt, rs);
}
return flag;
}
總結(jié)
以上所述是小編給大家介紹的Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言小編會(huì)及時(shí)回復(fù)大家的！
標(biāo)簽：
Ajax
相關(guān)文章：
1. Django與AJAX實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)數(shù)據(jù)顯示的示例代碼2. bootstrap select2 動(dòng)態(tài)從后臺(tái)Ajax動(dòng)態(tài)獲取數(shù)據(jù)的代碼3. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法4. ajax和fetch的區(qū)別點(diǎn)總結(jié)5. php + ajax 實(shí)現(xiàn)的寫入數(shù)據(jù)庫(kù)操作簡(jiǎn)單示例6. ajax動(dòng)態(tài)查詢數(shù)據(jù)庫(kù)數(shù)據(jù)并顯示在前臺(tái)的方法7. 前端實(shí)現(xiàn)滑動(dòng)按鈕AJAX與后端交互的示例代碼8. 使用AJAX的Struts驗(yàn)證框架_Java開源項(xiàng)目_AJAX9. ajax、axios和fetch之間優(yōu)缺點(diǎn)重點(diǎn)對(duì)比總結(jié)10. AJAX請(qǐng)求數(shù)據(jù)及實(shí)現(xiàn)跨域的三種方法詳解
排行榜
網(wǎng)公網(wǎng)安備