用jQuery和ajax 和json实现之前的所有功能：
登录：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>家庭记账本</title> <style type="text/css">/*设置CSS样式*/ input[type=text]{ color: #0099FF; width: 200px; height: 20px; } input[type=password]{ color: #0099FF; width: 200px; height: 20px; } </style> </head> <script type="text/javascript" src="js/jquery-3.5.1.js"></script> <!-- 导入jQuery的js文件 --> <script type="text/javascript"> $(document).ready(function(){ /* 绑定页面加载完成函数 */ var form=$("#form1")[0] $("#setbtn").click(function(){ /* 为注册按钮绑定函数 */ form.submit() }) $("#loginbtn").click(function(){ /* 为登录按钮绑定函数 */ var a=$("#name").val() var b=$("#pass").val() $.get( /* jQuery封装的ajax函数 */ "login_servlet", {"password":b,"name":a}, function(resp){ console.log(resp) if(resp.boolean=="false"){ alert("用户名或密码错误！") }else{ window.location.href="login.jsp" } }, "json" ) }) }) </script> <body> <!-- 表单 --> <div id="div1" align="center"> <h2 align="center"><font size="5" color="skyblue">家庭记账本账号登录系统</font></h2> <form action="SignUser.jsp" method="post" id="form1"> 账号<input type="text" id="name" name="name"/><span id="YN"></span><br><br> 密码<input type="password" id="pass" name="password"/><span id="YP"></span><br> <input type="button" id="loginbtn" value="登录" name="login"/> <input type="button" id="setbtn" value="注册" name="set"/> </form> </div> </body> </html>
后台的login_servlet:
package servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import dao.dao; /** * Servlet implementation class login_servlet */ @WebServlet("/login_servlet") public class login_servlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public login_servlet() { 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"); String name=null; String password=null; dao p=new dao(); PrintWriter out=response.getWriter(); name=request.getParameter("name"); password=request.getParameter("password"); try { if(p.check(name, password)) { String a="{"boolean":"true"}"; out.println(a); }else { String a="{"boolean":"false"}"; out.println(a); } } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } } /** * @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); } }
注册界面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>家庭记账本</title> <style type="text/css"> input[type=text]{ color: #0099FF; width: 200px; height: 20px; outline-color:aliceblue; } input[type=password]{ color: #0099FF; width: 200px; height: 20px; } </style> </head> <script type="text/javascript" src="js/jquery-3.5.1.js"></script><!-- 导入jQuery的js文件 --> <script type="text/javascript"> $(document).ready(function(){ /* 绑定页面加载完毕的函数 */ var name=$("#name") $("#name").blur(function(){ /* 为“姓名”填写框绑定验证函数 */ if(name.val().length>10||name.val().length<3){ $("#YN").text("账号长度请保持在【3~10】！")/* 直接用text()函数可设定DOM内容*/ }else{ $("#YN").text("") } }) var pass=$("#pass") var pass2=$("#pass2") pass.blur(function(){ /* 为“密码”填写框绑定函数*/ if(pass.val().length!=6){ $("#YP").text("密码长度为6位！") }else{ $("#YP").text("") } if(pass2.val!=""){ /* 修改密码后根据确认密码框是否有内容来更新DOM */ if(pass.val()!=pass2.val()){ $("#YP2").text("前后密码不一致！") }else{ $("#YP2").text("") } } }) pass2.blur(function(){ /* 为确认密码框绑定函数 */ if(pass.val()!=pass2.val()){ $("#YP2").text("前后密码不一致！") }else{ $("#YP2").text("") } }) var setbtn=$("#setbtn") /* 为“注册”按钮绑定函数 */ setbtn.click(function(){ if(($("#YP").html()=="")&&($("#YP2").html()=="")&&($("#YN").html()=="")){ /* 根据error图层是否为空来确认表格是否符合要求 */ var a={"name":$("#name").val()} /* 提前设计ajax的传输数据*/ $.ajax({ /* jQuery封装好的ajax函数*/ url:"sign_servlet", data:a, dataType:"json", success:function(resp){ if(resp.boolean=="true"){ /* 验证用户名是否存在 */ $("#signform")[0].submit() /* 提交表格 */ }else{ alert("用户名已存在！") } } }) } }) }) </script> <body> <!-- 表单的body部分 --> <div id="div1" align="center"> <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2> <form action="sign_servlet?method=set" method="post" id="signform"> 账号<input type="text" id="name" name="name"/><br><span id="YN"></span><br> 密码<input type="password" id="pass" name="password"/><br><span id="YP"></span><br> 确认密码<input type="password" id="pass2" name="password"/><br><span id="YP2"></span><br><br> <input type="button" id="setbtn" value="注册" name="set"/> </form> </div> </body> </html>
后台sign_servlet:
package servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import dao.dao; /** * Servlet implementation class sign_servlet */ @WebServlet("/sign_servlet") public class sign_servlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public sign_servlet() { 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"); dao p=new dao(); PrintWriter out=response.getWriter(); String name=null; name=request.getParameter("name"); try { if(p.checkname(name)) { String a="{"boolean":"true"}"; out.println(a); }else { String a="{"boolean":"false"}"; out.println(a); } } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); dao p=new dao(); String method=null; method=request.getParameter("method"); if(method.equals("set")) { String name=request.getParameter("name"); String pass=request.getParameter("password"); try { p.add(name, pass); } catch (SQLException e) { // TODO 自动生成的 catch 块 e.printStackTrace(); } request.getRequestDispatcher("login.jsp").forward(request, response); } } }
注意事项：
1、jquery的$.ajax({})方法的接受数据格式key是"dataType",容易拼写错误
2、传参的key是“data”
3、ajax接受数据格式为text的话出现了不少字符串比较问题，“==‘”不能判断，用json就能解决问题，只不过后台servlet需要自己设定一个json，需要转义双引号，用’‘即可