ajax无刷新实时验证用户名密码

1.创建servlet

package com.jbit.bookstore.web.servlet;

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;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public LoginServlet() {
		super();
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		doPost(request,response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,IOException {
		HttpSession session=request.getSession();
		String exe = request.getParameter("exe");
		String userName = request.getParameter("userName");
		String passWord = request.getParameter("passWord");
		PrintWriter out = response.getWriter();
		switch (exe) {
		case "checkUserName": {
			if ("admin".equals(userName)) {
				out.print(true);
			} else {
				out.print(false);
			}
		}
			break;
		case "checkPassWord": {
			if (!"admin".equals(userName)) {
				out.print(1);
			} else {
				if ("admin".equals(passWord)) {
					out.print(2);
				} else {
					out.print(3);
				}
			}
		}
			break;
		case "login":
		{
			session.setAttribute("userName",userName);
			response.sendRedirect(request.getContextPath()+"/jsp/admin_index.jsp");
		}
			break;
		default:
			break;
		}
	}
}

2.编写jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系统登录 - 超市账单管理系统</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	var flag = 0;
	//实时监测用户名
	$(function Name() {
		// 	id选择器
		$("#userName").keyup(
				function() {
					// 			alert(1);
					var userName = $("#userName").val();//获取用户输入的用户名
					$.ajax({
						type : "post",//请求方式
						data : {
							"userName" : userName
						//携带到后台数据
						},url : "LoginServlet?exe=checkUserName",//提交地址
						success : function(data) {//请求成功后，返回数据
							if (data == "true") {
								flag = 1;
								$("#usernull").html(
										"<font color=\"green\">帐号正确！</font>")
							} else {
								$("#usernull").html(
										"<font color=\"red\">帐号不正确！</font>")
							}
						}
					})
				});
	});

	//实时监测密码
	$(function passWord() {
		// 	id选择器
		$("#passWord").keyup(
				function() {
					// 			alert(1);
					var userName = $("#userName").val();
					var passWord = $("#passWord").val();//获取用户输入的密码
					$.ajax({
						type : "post",//请求方式
						data : {
							"userName" : userName,"passWord" : passWord
						//携带到后台数据
						},url : "LoginServlet?exe=checkPassWord",//提交地址
						success : function(data) {//请求成功后，返回数据
							if (data == "1") {
								alert("请先检查帐号是否正确！");
								$("#userName").focus();
							} else if (data == "2") {
								flag = 2;
								$("#pwdnull").html(
										"<font color=\"green\">密码正确！</font>")
							} else {
								$("#pwdnull").html(
										"<font color=\"red\">密码不正确！</font>")
							}
						}
					})
				});
	});
	function check() {
		if (flag == 0) {
			alert("请先检查帐号是否正确！");
			$("#userName").focus();
			return false;
		} else if (flag == 1) {
			alert("请先检查密码是否正确！");
			$("#passWord").focus();
			return false;
		} else {
			return true;
		}
	}
</script>
</head>
<body class="blue-style">
	<div id="login">
		<div class="icon"></div>
		<div class="login-Box">
			<form method="post" action="<%=request.getContextPath()%>/LoginServlet?exe=login"
				onsubmit="return check()">
				<dl>
					<dt>用户名：</dt>
					<dd>
						<input type="text" name="userName" class="input-text"
							id="userName" /> <span id="usernull"></span>
					</dd>
					<dt>密 码：</dt>
					<dd>
						<input type="password" name="passWord" class="input-text"
							id="passWord" /> <span id="pwdnull"></span>
					</dd>
				</dl>
				<div class="buttons">
					<input type="submit" name="submit" value="登录系统"
						class="input-button" /> <input type="reset" name="reset"
						value="重　　填" class="input-button" />
				</div>
			</form>
		</div>
	</div>
</body>
</html>

3.部署web.xml

  <display-name>BookShopManage</display-name>
  <welcome-file-list>
    <welcome-file>login.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>LoginServlet</display-name>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.jbit.bookstore.web.servlet.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/LoginServlet</url-pattern>
  </servlet-mapping>

原文链接：https://www.f2er.com/ajax/163579.html

ajax无刷新实时验证用户名密码

猜你在找的Ajax相关文章