Ajax实现登陆

用Ajax前后端分离实现一个简单的用户登录页面

先看一下页面效果图
在这里插入图片描述
账号和密码格式错误

格式正确但是用户名或密码错误（清空密码框内容，选中账号框全部内容）

程序详解：
@：对输入的账号和密码用正则表达式验证格式
@@：格式错误会提示让你输入正确的格式
@@@：验证输入的账号密码是否正确
@@@@：不正确密码清空账号输入框的内容全部被选中
@@@@@：账号和密码都正确会跳转到另外一个页面

看一下文件的布局结构
index.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 'index.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><style>body{text-align: center;float: center;background-image: url(img/2.jpg);}#big{width: 60%;height: 500px;border: 1px #F9FBF8 solid;margin: 120px auto;background-image: url(img/3.jpg);opacity: 0.7;}#small{width: 25%;height: 45%;border: 2px solid black;margin: 130px 600px;background-color: #F6F9F5;border-radius: 10px;}#one{width: 100%;height: 50px;text-align: center;margin-top: 50px;}#two{width: 100%;height: 50px;text-align: center;}#three{width: 100%;height: 50px;text-align: center;}#three input{width: 100px;height: 50px;background-color: #61DA9F;border-radius: 20px;}</style><body><div id="big"><div id="small"><form><div id="one">账号:<input type="text" name="name" id="name" /><br /><span id="a1"></span></div><div id="two">密码:<input type="password" name="pwd" id="pwd" /><br /><span id="a2"></span></div><div id="three"><input type="button" value="登陆" /></div></form></div></div><script src="js/jquery.js"></script><script>$(function(){$(":button").on("click",function(){var bool = true;//判断用户名function regUserName(){var userName = document.getElementById("name").value;var verify1 = /^[A-Z]{1}[A-Za-z_]{5,19}$/;var result1 = verify1.test(userName.trim());if (result1 && userName != ""){document.getElementById("a1").innerHTML = "";}else {document.getElementById("a1").innerHTML = "请输入正确的格式";document.getElementById("a1").style.color = "red";bool = false;}   }//判断密码function regPwd(){var pwd = document.getElementById("pwd").value;var verify2 = /^[A-Z]{1}[A-Za-z_]{5,19}$/;var result2 = verify2.test(pwd.trim());if (result2 && pwd != ""){document.getElementById("a2").innerHTML = "";}else {document.getElementById("a2").innerHTML = "请输入正确的格式";document.getElementById("a2").style.color = "red";bool = false;}}regUserName();regPwd();if(bool){$.ajax({url:"ajax",type:"post",data:{name:$("#name").val(),pwd:$("#pwd").val()},dataType:"text",success:function(data){if(data == "ok"){window.location.href="sucess.jsp";}else{$("#name").select();$("#pwd").val("");}}});}else{alert("验证功不通过");};});		});</script></body>
</html>

AjaxServlet.java代码

package 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;public class AjaxServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html");PrintWriter out = response.getWriter();String name = "Zhangsan";String pwd = "Zhangsan";String ajaxName = request.getParameter("name");String ajaxPwd = request.getParameter("pwd");System.out.println(ajaxName);System.out.println(ajaxPwd);if(name.equals(ajaxName) && pwd.equals(ajaxPwd)){out.print("ok");}else{out.print("error");}out.flush();out.close();}}

sucess.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 'sucess.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><body>这是登录成功之后现实的内容！！！</body>
</html>