编程应用背景：
使用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 }
前端登录时的界面截图：
登录后的界面截图：
扫描二维码关注公众号，回复：
5148305 查看本文章
