1. 程式人生 > >java編程——servlet和Ajax異步請求的接口編程(沒有調用數據庫的數據)

java編程——servlet和Ajax異步請求的接口編程(沒有調用數據庫的數據)

sam ati name ali 發布 exce col meta -s

編程應用背景:

  使用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編程——servlet和Ajax異步請求的接口編程(沒有調用數據庫的數據)