Ajax 註冊非同步驗證小例子

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

資料庫表結構：

表中有一條記錄：

項目結構：

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'register.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">-->  </head>  <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(null);  document.getElementById("msg").innerHTML = "正在發送...";    }  function checkUserIdCallback()  {  if(xmlHttp.readyState == 4)  {  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>    <body>    <form action="jsp/register.jsp" method="post" onsubmit="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="submit" value="註冊">    <input type="reset" value="重設">    </form>  </body></html>

CheckServlet.java

package com.xu.servlets;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 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 = "org.gjt.mm.mysql.Driver";public static final String DBURL = "jdbc:mysql://localhost:3306/mydb";public static final String DBUSER = "root";public static final String DBPASS = "root";private static final long serialVersionUID = 7502494116656742257L;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("utf-8");response.setContentType("text/html");Connection conn = null;PreparedStatement pstmt = null;ResultSet rs = null;PrintWriter out = response.getWriter();String userid = request.getParameter("userid");try{Class.forName(DBDRIVER);conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);String sql = "SELECT COUNT(userid) FROM user WHERE userid = ?";pstmt = conn.prepareStatement(sql);pstmt.setString(1, userid);rs = pstmt.executeQuery();if(rs.next()){if(rs.getInt(1)>0){out.print("true");}else{out.print("false");}}out.close();}catch (Exception e) {e.printStackTrace();}finally{try{conn.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>  <servlet>    <description>This is the description of my J2EE component</description>    <display-name>This is the display name of my J2EE component</display-name>    <servlet-name>CheckServlet</servlet-name>    <servlet-class>com.xu.servlets.CheckServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>CheckServlet</servlet-name>    <url-pattern>/CheckServlet</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

運行結果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More