首頁 >web前端 >js教程 >AJAX如何偵測使用者名稱是否具有重複性

AJAX如何偵測使用者名稱是否具有重複性

php中世界最好的语言
php中世界最好的语言原創
2018-03-31 09:15:543365瀏覽

這次帶給大家AJAX如何偵測使用者名稱是否具有重複性,AJAX偵測使用者名稱是否具有重複性的注意事項有哪些,以下就是實戰案例,一起來看一下。

先給大家展示下效果圖,再來給大家擼程式碼,效果圖如下:

AJAX如何偵測使用者名稱是否具有重複性

AJAX如何偵測使用者名稱是否具有重複性

下面寫一個簡單的例子,偵測使用者名稱是否唯一(直接擼程式碼):

#前端介面:

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>检测用户名是否唯一</title>
<style>
<!--
#toolTip {
  position:absolute;
  left:331px;
  top:39px;
  width:98px;
  height:48px;
  padding-top:45px;
  padding-left:25px;
  padding-right:25px;
  z-index:1;
  display:none;
  color:red;
  background-image: url(images/tooltip.jpg);
}
-->
</style>


                    
 
  

  

                                                                                                       
用户名:AJAX如何偵測使用者名稱是否具有重複性
密码:   

确认密码:
E-mail:
 
     
 

AJAX檔:

<script>
function createRequest(url) {
  http_request = false;
  if (window.XMLHttpRequest) {                  // 非IE浏览器
    http_request = new XMLHttpRequest();             //创建XMLHttpRequest对象
  } else if (window.ActiveXObject) {               // IE浏览器
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");  //创建XMLHttpRequest对象
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert("不能创建XMLHttpRequest对象实例!");
    return false;
  }
  http_request.onreadystatechange = getResult;            //调用返回结果处理函数
  http_request.open(&#39;GET&#39;, url, true);                //创建与服务器的连接
  http_request.send(null);                    //向服务器发送请求
}
function getResult() {
  if (http_request.readyState == 4) {       // 判断请求状态
    if (http_request.status == 200) {      // 请求成功,开始处理返回结果
      document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容
      document.getElementById("toolTip").style.display="block";  //显示提示框
    } else {              // 请求页面有错误
      alert("您所请求的页面有错误!");
    }
  }
}
function checkUser(userName){
  if(userName.value==""){
    alert("请输入用户名!");userName.focus();return;
  }else{
    createRequest(&#39;checkUser.jsp?user=&#39;+userName.value);
  }
}
</script>

jsp檔案:

此範例並沒有連接資料庫,只是用陣列簡單表示註冊過的使用者。

-1){
    out.println("很抱歉,该用户名已经被注册!");     //输出检测结果
  }else{
    out.println("恭喜您,该用户名没有被注册!");     //输出检测结果
  }
%>

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Ajax和jsonp在專案中的實戰總結

用Ajax如何驗證信箱、使用者名的唯一性

以上是AJAX如何偵測使用者名稱是否具有重複性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn