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

来源：互联网发布：神州数码医疗科技知乎编辑：程序博客网时间：2024/06/04 18:50

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,HttpServletResponse response) throws ServletException, 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>

0 0