利用ajax提交表單，實現資料前端後臺資料互動的完整流程演示
阿新 • • 發佈：2019-01-07
該演示需要用到 1 : json.jar(下載)
2 : jquery.js(下載)
流程演示：1.點選“登入”按鈕，傳參到後臺
2.後臺獲取資料，處理分析資料，利用JSONObject返回結果(JSONObject需要用到一個 json.jar 即可)
3.前端獲取後臺返回的結果進行判斷，然後前端分析該結果，再決定進入後臺的最後一個環節（登入是否成功的跳轉）
4.頁面跳轉
效果演示：
登入頁面：
使用者名稱密碼都正確，跳轉到index
工程目錄樹：
具體流程：
1，在WebContent目錄下新建一個toLogin.jsp , 用於跳轉到login.jsp頁面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<jsp:forward page="login.do?method=0"></jsp:forward>2.Servlet:
@WebServlet("/login.do") //servlet的名字 public class login extends HttpServlet { private static final long serialVersionUID = 4306651429943204510L; public final static String To_login_Page = "0"; public final static String login = "1"; public final static String index = "2"; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String method = req.getParameter("method"); switch(method){ case To_login_Page: To_login_Page(req,resp); break; case login: login(req,resp); break; case index: index(req,resp); break; } } private void index(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.getRequestDispatcher("WEB-INF/view/index.jsp").forward(req, resp); } private void To_login_Page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.getRequestDispatcher("WEB-INF/view/login.jsp").forward(req, resp); } private void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getParameter("username"); String password = req.getParameter("password"); System.out.println(username); System.out.println(password); boolean IsOK = false; if(username.equals("admin")&&password.equals("123456")){ IsOK = true; }else{ IsOK = false; } try { JSONObject json = new JSONObject(); json.put("IsOK", IsOK); PrintWriter out = resp.getWriter(); out.println(json.toString()); out.close(); } catch (JSONException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } } }
3.login.jsp:
如果實在看不懂，可以嘗試下載我的project,去執行，需要說明的是，我建立該工程的環境是tomcat 9<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script> </head> <body> <form id="form" action="" method="post"> <input type="text" id="username"> <br> <input type="password" id="password"> <br> <input type="button" id="btn" value="登入"> </form> <script> $(document).ready(function(){ $("#btn").click(function(){ var name = $("#username").val(); var pwd = $("#password").val() $.post("login.do?method=1", //利用ajax發起請求，這裡寫servlet的路徑 {"username":name,"password":pwd}, //傳參 function(data){ //請求成功時的回撥函式 if(data.IsOK == true){ window.location.href="login.do?method=2"; //如果返回的IsOK的值為true,也就是使用者名稱密碼都正確，則執行該跳轉 }else{ window.location.href="http://www.baidu.com"; } }, "json" ); }) }) </script> </body> </html>