• 使用ajax模拟用户名是否被占用

    下面是一个ajax的简单例子，这个例子主要是模拟一下在各大网站或论坛使用的注册时检测用户名是否被占用的问题，当注册用户名被占用，在不刷新页面的情况下给出“该用户名被占用，请另选一个用户名”的提示，没有被占用就给出“该用户名可以注册”的提示。

    按照如下的步骤进行：

    1、编写一个html页面，在这个页面中有一个表单，但我们的表单没有提交按钮，当用户填写了“用户名”之后，在用户名之后会自动显示该用户名是否被占用。下面是该html页面的完整代码：register.html

    Xml代码 复制代码
    1. <html>  
    2.   <head>  
    3.       <script language="javascript">  
    4.         var xmlHttp = null ;   
    5.        function showHint(str) {   
    6.          if (str.length==0) {    
    7.            document.getElementById("txtHint").innerHTML="";   
    8.            return;   
    9.          }   
    10.          xmlHttp = GetXmlHttpObject();   
    11.          if (xmlHttp==null) {   
    12.            alert ("您的浏览器不支持AJAX!");   
    13.            return;   
    14.          }    
    15.          xmlHttp.onreadystatechange = stateChanged;   
    16.          xmlHttp.open("GET",'gethint.jsp?search=' + str,true);   
    17.          xmlHttp.send(null);   
    18.        }   
    19.   
    20.        function stateChanged() {   
    21.          if (xmlHttp.readyState==4) {    
    22.            document.getElementById("txtHint").innerHTML = xmlHttp.responseText;    
    23.           }   
    24.        }   
    25.   
    26.        function GetXmlHttpObject() {   
    27.          try {   
    28.            //Firefox, Opera 8.0+, Safari   
    29.            xmlHttp = new XMLHttpRequest();   
    30.          } catch (e) {   
    31.            //Internet Explorer   
    32.            try {   
    33.              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
    34.            } catch (e) {   
    35.              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
    36.            }   
    37.          }   
    38.          return xmlHttp;   
    39.        }   
    40.      </script>  
    41.    </head>  
    42.       
    43.   <body>  
    44.      <form>    
    45.        用户名:   
    46.          <input type="text" id="txt1" onkeyup="showHint(this.value)">  
    47.          **： <span id="txtHint"></span></p>    
    48.      </form>  
    49.    </body>  
    50. </html>  

    2、编写一个jsp页面，该jsp页面负责处理对用户名是否被占用的检测，在这里为了简单起见，因为只是模拟一 下这个过程，所以没有使用数据库，没有从数据库中去检测用户名，而是使用一个数组，预先在数组中定义一些用户名（要连接数据库原理都一样，就只要查询一遍数据库）。其代码如下：gethint.jsp

    Java代码 复制代码
    1. <%@ page contentType="text/html;charset=gbk"%>   
    2.   
    3. <%   
    4. String[] a = new String[31] ;   
    5. a[0]="ylj" ;   
    6. a[1]="hnylj" ;   
    7. a[2]="wjh" ;   
    8. a[3]="yang" ;   
    9. a[4]="sheng" ;   
    10. a[5]="chen" ;   
    11. a[6]="zhang" ;   
    12. a[7]="ming" ;   
    13. a[8]="liming" ;   
    14. a[9]="wuhua" ;   
    15. a[10]="liuning" ;   
    16. a[11]="xietingfeng" ;   
    17. a[12]="zhangbozhi" ;   
    18. a[13]="renxian" ;    
    19. a[14]="liudehua" ;   
    20. a[15]="chenhui" ;   
    21. a[16]="zhangxiao" ;   
    22. a[17]="wangjin" ;   
    23. a[18]="wujing" ;   
    24. a[19]="lihua" ;   
    25. a[20]="yiyang" ;   
    26. a[21]="yindong" ;   
    27. a[22]="huangxiaohua" ;   
    28. a[23]="fanxiao" ;   
    29. a[24]="sugao" ;   
    30. a[25]="hejiong" ;   
    31. a[26]="lixiang" ;   
    32. a[27]="xiaobao" ;   
    33. a[28]="baozhen" ;   
    34. a[29]="liuhuan" ;   
    35. a[30]="zhangyang" ;   
    36.   
    37. String q = request.getParameter("search") ;   
    38. String hint1 = null ;   
    39. String hint2 = null ;   
    40.   
    41. if (q.length()>0) {   
    42.   for (int i=0;i<a.length;i++) {   
    43.     if (!q.equals(a[i])) {   
    44.         hint1 = "该用户名可以注册" ;   
    45.     } else {   
    46.           hint2 = "该用户名被占用，请另选一个用户名" ;   
    47.      }   
    48.   }   
    49. }   
    50. if (hint2!=null)    
    51.   out.println(hint2) ;   
    52. else  
    53.   out.println(hint1) ;   
    54. %>  

    3、在tomcat的webapp目录下建立一个ajax文件夹，在该文件夹下再建立一个WEB-INF文件夹，在这个WEB-INF文件夹下再建立一个web.xml文件，这个文件可以怎么都不配，只需一个schema声明，其代码如下：

    Xml代码 复制代码
    1. <?xml version="1.0" encoding="ISO-8859-1"?>  
    2. <web-app xmlns="http://java.sun.com/xml/ns/javaee"  
    3.    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    4.    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
    5.    version="2.5">  
    6.   
    7. </web-app>  

    4、将上面编写好的ajax.html文件和time.jsp文件复制到ajax目录下，然后启动tomcat，打开浏览器，在浏览器的地址栏输入：http://localhost:8080/ajax/register.html 即可看到一个表单页面，当我们在填写“用户名”时，在表单后面将自动显示出该用户名是否被占用的信息。

    这个例子程序非常地简单，只是模拟一下这个过程。
  • 相关阅读:
    Redis服务器配置
    Spark History Server配置使用
    CentOS7.3安装Nginx
    U盘安装CentOS7的最终解决方案
    iconfont_3种引用方式
    div+css 让一个小div在另一个大div里面 垂直居中
    JavaScript数组方法
    addEventListener()和removeEventListener()
    js获取网页高度
    Linux修改命令行样式
  • 原文地址：https://www.cnblogs.com/huozhicheng/p/2533209.html
Copyright © 2020-2023  润新知