Java--- Ajax异步验证用户名是否存在

最新推荐文章于 2023-05-07 16:04:19 发布

dbb531595

最新推荐文章于 2023-05-07 16:04:19 发布

阅读量278

点赞数 1

文章标签： java 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/Leroyo/p/8167772.html

版权

今天复习了一下 Ajax异步验证用户名是否存在，在下面我写三种，一般开发时候都用第三种 jQuery和Ajax结合的形式，下面就介绍三种，具体说明代码里就有啦，废话不多说，直接上代码：

第一种方式：用基础语法js实现 get请求：

 1 //封装了获取XMLHttpRequest对象的方法
 2 function getXMLHttpRequest() {
 3     var xmlhttp;
 4     if (window.XMLHttpRequest) {// code for all new browsers
 5         xmlhttp = new XMLHttpRequest();
 6     } else if (window.ActiveXObject) {// code for IE5 and IE6
 7         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 8     }
 9 
10     return xmlhttp;
11 
12 }
13 
14 
15 
16 <script type="text/javascript" >
17       function ckName(){
18        //首先获取用户名对象
19        var username = document.getElementById("username");
20        //获取XMLHttpRequest对象
21        var req = getXMLHttpRequest();
22        //创建连接
23      //  req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);
24        req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true);
25        //4.发送请求
26        req.send(null);
27        //回调函数
28        req.onreadystatechange = function(){
29            if(req.readyState==4){
30              if(req.status==200){
31                 //获取message
32                 var  messsage = document.getElementById("message");
33                 if(req.responseText=="true"){
34                     message.innerHTML ="用户名已经存在";
35                 }else{
36                     message.innerHTML ="用户名可以使用";
37                 }
38              }
39            
40            }
41        }
42        
43      }
44 </script>
45 
46 <body>
47   用户名:  <input type="text"  name="username"  id="username" οnblur="ckName()" />
48   <font id="message">请输入有效的邮箱地址</font>
49 </body>

Servlet模拟数据库中存在的名字，这里没有连接数据库，就直接模拟了，到实际操作中，直接从数据库中查出名字看是否存在就Ok啦！

package adminServlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CkUsernameServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        
        String username = request.getParameter("username");
        System.out.println(username);
        if("admin".equals(username)){
            out.print(true);
        }else{
            out.print(false);
        }
        
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);
    }

}

第二种方式，就改下js代码就好了 post 提交个参数：

function ckName(){
           var username = document.getElementById("username");
           var req = getXMLHttpRequest();
           //创建连接 用post提交方式
           req.open("POST","${pageContext.request.contextPath}/servlet/ckUsernameServlet",true);
           //向请求添加HTTP头，这个必加，是提交到后台的方式
           req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
           //把请求发送到服务器
           req.send("username="+username.value);
           //回调函数
           req.onreadystatechange=function(){
                if(req.readyState==4 && req.status==200){
                     var  messsage = document.getElementById("message");
                     if(req.responseText=="true"){
                        message.innerHTML ="用户名已经存在";
                     }else{
                         message.innerHTML ="用户名可以使用";
                     }
               }    
           }
     }

*****第三种方式：最常用的 jQuery 和 Ajax 结合相互使用

   $(document).ready(function(){
           $("#username").blur(function(){
                   //   alert($(this).val());
             $.post("${pageContext.request.contextPath}/servlet/ckUsernameServlet",{username:$(this).val()},
             function(data){
               if(data=="true"){     //data 就是从servlet返回来的数据
                 $("#message").html("用户名已存在");
               }else{
                  $("#message").html("用户名可以注册");
               }
             }
             ,"text");
               
           });
     });