时间:2021-10-28 10:25:34 | 栏目:JavaScript代码 | 点击:次
在很多注册的页面上,我们可能会遇到以下情况,当我们注册用户名的时候可能会提示该用户名已注册,其实现是应用AJAX技术。
首先写一个登陆页面
<html> <head> <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> </head> <body> <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>