java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)

时间:2022-08-27 14:07:07

编程应用背景:

  使用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 }

 

前端登录时的界面截图:

java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)

 

登录后的界面截图:

java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)

java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)