编程应用背景:
使用 HttpServlet 接口来编写一个动态登录的接口 (需要在 Tomcat 容器发布)
登录的 LoginSample 类代码:
- package com.zhang.java;
- public class LoginSample {
- public LoginSample() { // 构造方法
- // System.out.println("构造方法被调用!");
- }
- public boolean login(String ln, String pwd) {
- if (ln != null && ln.length()> 2 && ln.length() <17
- && pwd != null && pwd.length()> 2 && pwd.length() <17) {
- if (ln.equals("zzp") && pwd.equals("123456")) { // 设置的静态登录名和登录密码, 没有调用数据库的信息
- System.out.println("恭喜您, 登录成功!");
- return true;
- } else {
- System.out.println("用户名或密码错误!");
- }
- } else {
- System.out.println("参数错误!");
- }
- return false;
- }
- }
登录后台的代码:
- package com.zhang.java;
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.annotation.webServlet;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- /**
- * Servlet implementation class LoginTry
- */
- @WebServlet("/LoginTry")
- public class LoginTry extends HttpServlet {
- private static final long serialVersionUID = 1L;
- /**
- * @see HttpServlet#HttpServlet()
- */
- public LoginTry() {
- super();
- // TODO Auto-generated constructor stub
- }
- /**
- * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
- * response)
- */
- protected void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- // 返回值编码的修改
- response.setContentType("text/html;charset=UTF-8");
- // 收到的参数的编码修改
- request.setCharacterEncoding("UTF-8");
- String user = request.getParameter("loginname");
- String pwd = request.getParameter("password");
- LoginSample ls = new LoginSample();
- Boolean result = ls.login(user, pwd);
- // 创建一个 info 信息来说明登录结果
- String info = "{\"method\":\"get\",";
- if (result) {
- info += "\"status\":200,\"msg\":\" 恭喜您登录成功!\"";
- } else {
- info += "\"status\":500,\"msg\":\" 抱歉, 您登录失败!\"";
- }
- info += "}";
- // 控制台输出登录的 info 信息
- // System.out.println(info);
- // 接口返回信息
- response.getWriter().append("get 方法被调用!" + user + pwd).append(request.getContextPath());
- }
- /**
- * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
- * response)
- */
- protected void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- // 返回值编码的修改
- response.setContentType("text/html;charset=UTF-8");
- // 收到的参数的编码修改
- request.setCharacterEncoding("UTF-8");
- String user = request.getParameter("userid");
- String pwd = request.getParameter("pwds");
- LoginSample ls = new LoginSample(); // 调用 LoginSmaple 类来创建一个登录的实例 ls
- Boolean result = ls.login(user, pwd); // 创建一个变量来存储登录结果
- String info = "{\"method\":\"post\","; // 创建一个 info 信息来说明登录结果
- if(result) { // 使用登录结果作为判断条件
- info+="\"status\":200,\"msg\":\" 恭喜您登录成功!\"";
- }
- else {
- info+="\"status\":500,\"msg\":\" 抱歉, 您登录失败!\"";
- }
- info += "}";
- System.out.println(info); // 控制台输出 info 信息
- response.getWriter().append(info); // 接口返回结果
- }
- }
前端登录页面 HTML 代码:
- <!doctype HTML>
- <HTML>
- <head>
- <meta http-equiv="content-type" content="text/html" charset="utf-8">
- <title>
- zzp 的网页
- </title>
- <!-- 接下来引入 JQuery 最小版本的库文件 -->
- <script src="jquery.min.js" type="text/javascript">
- </script>
- <!-- 接下来引入自己写的 js 文件 -->
- <script src="test.js" type="text/javascript">
- </script>
- </head>
- <body>
- <h1 align="center">
- Hello HTML
- </h1>
- <form id="loginForm" method="post" action="./LoginTry">
- <div id="info" style="text-align:center">
- <p>
- 请输入您的账号:
- </p>
- <input type="text" name="userid" placeholder="登录名" />
- <br/>
- <p>
- 请输入您的密码:
- </p>
- <input type="password" name="pwds" placeholder="密码" />
- <br/>
- <br/>
- <!-- 下面这一句原本是为了使用 form 表单的方式来调用 post 方法的 -->
- <!-- <input type="submit" value="开始登录"> -->
- <!-- 使用 "登录" 按钮的 onclick 事件来调用 js 文件, 执行 post 方法的异步请求 -->
- <input type="button" onclick="javascript:loginJS()" value="登录" />
- </div>
- </form>
- </body>
- </HTML>
test.JS 脚本代码:
- /**
- * 登录界面中 "登录" 按钮会调用的 JS 方法
- */
- function loginJS() {
- // 定义一个存放 URL 的变量, 指定请求的接口地址
- var AjaxURL = "http://localhost:8080/LoginInterServlet/LoginTry"; //Tomcat 中服务的地址和接口
- $.Ajax({
- url : AjaxURL,
- type : "post", // 采用 post 方法
- dataType : "json", // 请求和返回的参数格式; 如果是非 JSON 格式需要使用 text 格式
- // 获取 id=loginForm 的 form 表单中的参数
- data : $('#loginForm').serialize(),
- // 当接口调用成功时, 执行 success 中的方法, result 参数指的是接口返回的信息
- success : function(result) {
- // result[***] 表示的是对应的键经过 解析后的值
- // alert("status:"+result["status"]+","+result["msg"]);
- // 如果登录成功, 将 id="info" 的元素 改为 接口返回值中 "msg" 信息
- $('#info')[0].innerText=result["msg"];
- },
- // 当接口调用失败时, 执行 error 中的方法
- error : function() {
- alert("服务器忙...... 请稍后重试!");
- }
- });
- }
前端登录时的界面截图:
登录后的界面截图:
来源: http://www.bubuko.com/infodetail-2944814.html