前端與後端介面的互動案例
阿新 • • 發佈：2018-12-16
一、案例描述
1，前端頁面提供使用者名稱，密碼輸入框。 2，通過Ajax傳送請求到後端Serlvet。 3，後端Serlvet處理請求，根據輸入的使用者名稱和密碼返回給前端不同資訊
前端訪問後端介面通過後端提供的的URL
二、主要程式碼
1、前端頁面
<!DOCTYPE html> <html> <head> <title>login.html</title> <meta charset="utf-8"> </head> <！-- 待補充的javaScript Ajax請求程式碼 在下面 --！> <body> <form action="#"> username:<input type="text" name="username"><br> password:<input type="password" name="password"><br> <input type="button" value="submit" id="submit"> </form> </body> </html>
如圖：簡單到不忍直視的頁面
2、Ajax請求程式碼
這裡使用了jquery-1.8.3.js庫，順便回顧下函式的書寫格式 格式：jQuery.ajax([settings]) * 引數settings：設定所有的引數,JSON物件 * data:請求引數 * type:請求方式 (“POST” 或 “GET”)， * success:成功的回撥函式，function(data, [textStatus], [jqXHR]) * error:請求失敗時呼叫函式 * dataType:預期伺服器返回的資料型別
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#submit").click(function(){ var url = "/myblog/servlet/loginServlet"; var params = {"username":$("input[type='text']").val(), "password":$("input[type='password']").val()}; $.ajax({ "url" : url, "data" : params, "type" : "post", "success" : function(data) { // 引數為json型別的物件 alert(data.message) }, "error" : function() { alert("使用者名稱或者密碼錯誤"); } }); }); }); </script>
3、Servlet程式碼及web.xml配置 寫這個，有點弱智了，但為了程式碼的完整性，忍一下吧！ web.xml
<servlet> <servlet-name>LoginServlet</servlet-name> <servlet-class>com.imooc.login.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/servlet/loginServlet</url-pattern> </servlet-mapping>
servlet:
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 5417488369543075097L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String message = "{\"message\":\"登入成功\"}";
response.setContentType("application/json;charset=utf-8");
if("雙擊".equals(username) && "666".equals(password)) {
response.getWriter().write(message);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}