编程应用背景：
使用HttpServlet接口来编写一个动态登录的接口（需要在Tomcat容器发布）
登录的 LoginSample 类代码：
1 package com.zhang.java;
2
3 public class LoginSample {
4 public LoginSample() { //构造方法
5 // System.out.println("构造方法被调用！");
6 }
7
8 public boolean login(String ln, String pwd) {
9 if (ln != null && ln.length() > 2 && ln.length() < 17
10 && pwd != null && pwd.length() > 2 && pwd.length() < 17) {
11 if (ln.equals("zzp") && pwd.equals("123456")) { //设置的静态登录名和登录密码，没有调用数据库的信息
12 System.out.println("恭喜您，登录成功!");
13 return true;
14 } else {
15 System.out.println("用户名或密码错误！");
16 }
17 } else {
18 System.out.println("参数错误！");
19 }
20 return false;
21 }
22
23 }
登录后台的代码：
1 package com.zhang.java;
2
3 import java.io.IOException;
4
5 import javax.servlet.ServletException;
6 import javax.servlet.annotation.WebServlet;
7 import javax.servlet.http.HttpServlet;
8 import javax.servlet.http.HttpServletRequest;
9 import javax.servlet.http.HttpServletResponse;
10
13 /**
14 * Servlet implementation class LoginTry
15 */
16 @WebServlet("/LoginTry")
17 public class LoginTry extends HttpServlet {
18 private static final long serialVersionUID = 1L;
19
20 /**
21 * @see HttpServlet#HttpServlet()
22 */
23 public LoginTry() {
24 super();
25 // TODO Auto-generated constructor stub
26 }
27
28 /**
29 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
30 * response)
31 */
32 protected void doGet(HttpServletRequest request, HttpServletResponse response)
33 throws ServletException, IOException {
34 // TODO Auto-generated method stub
35
36 // 返回值编码的修改
37 response.setContentType("text/html;charset=UTF-8");
38 // 收到的参数的编码修改
39 request.setCharacterEncoding("UTF-8");
40
41 String user = request.getParameter("loginname");
42 String pwd = request.getParameter("password");
43
44 LoginSample ls = new LoginSample();
45 Boolean result = ls.login(user, pwd);
46
47 // 创建一个info信息来说明登录结果
48 String info = "{\"method\":\"get\",";
49 if (result) {
50 info += "\"status\":200,\"msg\":\"恭喜您登录成功！\"";
51 } else {
52 info += "\"status\":500,\"msg\":\"抱歉，您登录失败！\"";
53 }
54 info += "}";
55 // 控制台输出登录的info信息
56 // System.out.println(info);
57
58 // 接口返回信息
59 response.getWriter().append("get方法被调用！" + user + pwd).append(request.getContextPath());
60 }
61
62 /**
63 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
64 * response)
65 */
66 protected void doPost(HttpServletRequest request, HttpServletResponse response)
67 throws ServletException, IOException {
68 // TODO Auto-generated method stub
69
70 // 返回值编码的修改
71 response.setContentType("text/html;charset=UTF-8");
72 // 收到的参数的编码修改
73 request.setCharacterEncoding("UTF-8");
74
75 String user = request.getParameter("userid");
76 String pwd = request.getParameter("pwds");
77
78 LoginSample ls = new LoginSample(); //调用LoginSmaple类来创建一个登录的实例ls
79
80 Boolean result = ls.login(user, pwd); //创建一个变量来存储登录结果
81
82 String info = "{\"method\":\"post\","; //创建一个info信息来说明登录结果
83
84 if(result) { //使用登录结果作为判断条件
85 info+="\"status\":200,\"msg\":\"恭喜您登录成功！\"";
86 }
87 else {
88 info+="\"status\":500,\"msg\":\"抱歉，您登录失败！\"";
89 }
90 info += "}";
91 System.out.println(info); //控制台输出info信息
92 response.getWriter().append(info); //接口返回结果
93
94 }
95
96 }
前端登录页面HTML代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <title>zzp的网页</title> 6 7 <!--接下来引入JQuery最小版本的库文件 --> 8 <script src="jquery.min.js" type="text/javascript"></script> 9 <!-- 接下来引入自己写的 js 文件 --> 10 <script src="test.js" type="text/javascript"></script> 11 12 </head> 13 14 15 <body > 16 <h1 align="center">Hello HTML</h1> 17 18 <form id="loginForm" method="post" action="./LoginTry"> 19 <div id="info" style="text-align:center"> 20 <p>请输入您的账号：</p> 21 <input type="text" name="userid" placeholder="登录名" /> 22 <br/> 23 <p>请输入您的密码：</p> 24 <input type="password" name="pwds" placeholder="密码" /> 25 <br/><br/> 26 27 <!-- 下面这一句原本是为了使用form表单的方式来调用post方法的 --> 28 <!-- <input type="submit" value="开始登录"> --> 29 30 <!-- 使用“登录”按钮的onclick事件来调用js文件，执行post方法的异步请求 --> 31 <input type="button" onclick="javascript:loginJS()" value="登录" /> 32 </div> 33 </form> 34 35 </body> 36 </html>
test.js脚本代码：
1 /**
2 * 登录界面中“登录”按钮会调用的js方法
3 */
4
5 function loginJS() {
6
7 // 定义一个存放URL的变量,指定请求的接口地址
8 var AjaxURL = "http://localhost:8080/LoginInterServlet/LoginTry"; //Tomcat中服务的地址和接口
9
10 $.ajax({
11 url : AjaxURL,
12 type : "post", // 采用post方法
13 dataType : "json", // 请求和返回的参数格式；如果是非json格式需要使用text格式
14 // 获取id=loginForm的form表单中的参数
15 data : $(‘#loginForm‘).serialize(),
16 // 当接口调用成功时，执行success中的方法，result参数指的是接口返回的信息
17 success : function(result) {
18 // result[***]表示的是对应的键经过 解析后的值
19 // alert("status:"+result["status"]+", "+result["msg"]);
20
21 //如果登录成功，将id=“info”的元素 改为 接口返回值中“msg”信息
22 $(‘#info‘)[0].innerText=result["msg"];
23 },
24 // 当接口调用失败时，执行error中的方法
25 error : function() {
26 alert("服务器忙……请稍后重试！");
27 }
28 });
29
30 }
前端登录时的界面截图：
登录后的界面截图：
原文地址：https://www.cnblogs.com/zzp-biog/p/10351761.html
时间： 2024-10-12 19:13:20