频道栏目
首页 > 资讯 > 其他 > 正文

关于AJAX来判定用户是否注册过

17-01-16        来源:[db:作者]  
收藏   我要投稿

在很多注册的页面上,我们可能会遇到以下情况,当我们注册用户名的时候可能会提示该用户名已注册,其实现是应用AJAX技术。

首先写一个登陆页面

<html>
 <head></head>
 <body>
  &lt;%@ page contentType=&quot;text/html&quot; pageEncoding=&quot;gbk&quot;%&gt;   
  <title></title> 
  <script type="text/JavaScript">
var xmlHttp;
var flag;
function createXMLHttp() {
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function checkUserid(userid) {
    createXMLHttp();
    xmlHttp.open("POST", "CheckServlet?userid=" + userid);
    xmlHttp.onreadystatechange = checkUseridCallback;
    xmlHttp.send();
    document.getElementById("msg").innerHTML = "正在验证。。。";
}

function checkUseridCallback() {
    if (xmlHttp.readyState == 400) {
        if (xmlHttp.status == 200) {
            var text = xmlHttp.responseText;
            if (text == "true") {
                flag = false;
                document.getElementById("msg").innerHTML = "用户ID重复,无法使用";

            } else {
                flag = true;
                document.getElementById("msg").innerHTML = "此用户ID可以注册";
            }
        }
    }
}

function checkForm() {
    return flag;
}
</script>   
  <form action="tt.jsp" method="post" onsubmit="return checkForm()">
    用户ID 
   <input type="text" name="userid" onblur="checkUserid(this.value)" />
   <span id="msg"></span>
   <br /> 姓名:
   <input type="text" name="name" />
   <br /> 密码:
   <input type="password" name="password" />
   <br /> 
   <input type="button" value="注册" /> 
   <input type="reset" value="重置" /> 
  </form>  
 </body>
</html>

随后写一个servlet的Java代码

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet {
    public static final String DBDRIVER = "Oracle.jdbc.OracleDriver";
    public static final String DBURL = "jdbc:oracle:thin:@59.173.240.149:1521:heer";
    public static final String DBUSER = "hnsyu_dev";
    public static final String DBPASS = "hnsyuok";

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
    IOException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
    IOException {
        request.setCharacterEncoding("gbk");
        response.setContentType("text/html");
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        PrintWriter out = response.getWriter();
        String userid = request.getParameter("userid");
        try {
            Class.forName(DBDRIVER);
            connection = DriverManager.getConnection(DBURL, DBUSER, DBPASS);
            String sql = "select count(userid) from userdemo where userid=?";
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1, userid);
            resultSet = preparedStatement.executeQuery();
            if (resultSet.next()) {
                if (resultSet.getInt(1) > 0) {
                    out.print("false");
                    System.out.println("true");
                } else {
                    out.print("false");
                }
            }
            out.close();
        } catch(Exception e) {
            e.printStackTrace();
        } finally {
            try {
                connection.close();
            } catch(Exception e) {
                e.printStackTrace();
            }
        }
    }
}

其中还需要在web.xml中进行配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name> 
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
   <servlet>
  <servlet-name>CheckServlet</servlet-name>
  <servlet-class>CheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>CheckServlet</servlet-name>
  <url-pattern>/CheckServlet</url-pattern>
  </servlet-mapping> 
</web-app>
相关TAG标签
上一篇:css3变形效果3D
下一篇:jq中的延迟对象详解
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站