java編程——servlet和Ajax異步請求的接口編程（沒有調用數據庫的數據）
阿新 • • 發佈：2019-02-04
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異步請求的接口編程（沒有調用數據庫的數據）