ajax方式提交表單數據並判斷當前註冊用戶是否存在
阿新 • • 發佈：2018-11-04
ml2 inf 9.png nbsp value exc character equals ans
項目的目錄結構
源代碼：
regservlet.java
package register; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class regservlet */ @WebServlet("/regservlet") public class regservlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public regservlet() { super(); // TODO Auto-generated constructor stub} /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected 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 name = request.getParameter("username"); // 模擬數據庫 if ("張運濤".equals(name)) { // out.println("用戶名已存在"); out.println("<font color=red>用戶名已存在</font>"); } else if (name.equals("")) { out.println("<font color=red>用戶名不能為空</font>"); } else { // out.println("用戶名可以使用"); out.println("<font color=blue>用戶名可以使用</font>"); } out.flush(); out.close(); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
register.js
window.onload = function() { document.getElementById("username").onblur = function() { // 獲取<input type="text" name="username" value="" id="username"> var username = document.getElementById("username").value; // 1 var xmlHttp = ajaxFunction(); // 2 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200 || xmlHttp.status == 304) { var data = xmlHttp.responseText; document.getElementById("divcheck").innerHTML = data; } } } // 3 xmlHttp.open("post", "../regservlet?timeStamp=" + new Date().getTime(), true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 4 xmlHttp.send("username=" + username); } } function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; }
register.jsp
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>校驗用戶名是否存在</title> <script type="text/javascript" src="./register.js"> </script> </head> <body> <center> <form action="" enctype="application/x-www-form-urlencoded"> <h3>請填寫用戶註冊信息</h3> <table border="1"> <tr> <td>用戶名:</td> <td><input type="text" name="username" value="" id="username"> <!-- 用戶名已存在顯示在div 中 --> <div id="divcheck"></div> </tr> <tr> <td>密碼:</td> <td><input type="password" name="psw" value=""></td> </tr> </table> </form> </center> </body> </html>
運行截圖：
完整源代碼https://pan.baidu.com/s/1PSjQuU96emWL1UYYMKwlaA
ajax方式提交表單數據並判斷當前註冊用戶是否存在