Ajax,Java无刷新简单验证用户名[详细代码]
功能: 检测userName是否可用.userName为admin则不可用,反之可用.实际则可根据自己的需求到数据库验证.
login.jsp 代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>无刷新验证用户名是否可用</title> <script type="text/javascript" src="js/checkUsernamePost/login.js" charset="utf-8"></script> </head> <body> <h2>无刷新验证用户名是否可用</h2> <input type="text" id="userName" /> <span id="tip" style="display:none;color:red"></span> <br /> <input type="button" value="ajax验证" onclick="checkUserName();"/> </body> </html>
login.js 代码:
var $ = function(id) { return document.getElementById(id); } // 得到 XMLHttpRequest 对象 var getXMLHttpRequest = function() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e2) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e3) { window.alert("Sorry,your browser does not support Ajax!"); } } } return xmlHttp; } var xmlHttp = ""; // 检测 username var checkUserName = function() { // 得到 XMLHttpRequest xmlHttp = getXMLHttpRequest(); if (xmlHttp) { // open xmlHttp.open("post", document.URL + "checkUsername", true); // window.alert(document.URL + "checkUsername"); // 设置 Content-type xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置回调函数 xmlHttp.onreadystatechange = statechange; // send var sendData = "userName=" + $("userName").value; xmlHttp.send(sendData); } } // ajax回调函数 var statechange = function() { // 0: 请求未初始化 // 1: 服务器连接已建立 // 2: 请求已接收 // 3: 请求处理中 // 4: 请求已完成,且响应已就绪 if (xmlHttp.readyState == "4") { // 200: "OK" // 404: 未找到页面 if (xmlHttp.status == "200") { var isOK = xmlHttp.responseText; if ("t" == isOK) { $("tip").innerHTML = "恭喜,用户名可用!"; } else if ("f" == isOK) { $("tip").innerHTML = "对不起,用户名不可用!"; $("userName").value = ""; } $("tip").style.display="inline-block"; } } }
CheckUsername.java 代码:
package com.checkUsernamePost; 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 CheckUsername extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset-utf-8"); String userName = req.getParameter("userName"); // System.out.println(userName); PrintWriter out = resp.getWriter(); // 简单验证,不从数据库中取数据.userName为admin则不可用 if ("admin".equals(userName)) { out.print("f"); } else { out.print("t"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
web.xml 配置文件:
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" 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_2_5.xsd"> <servlet> <servlet-name>checkUsername</servlet-name> <servlet-class>com.checkUsernamePost.CheckUsername</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkUsername</servlet-name> <url-pattern>/checkUsername</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
文件结构:
运行结果:
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16