struts2+ajax+json實現使用者登入
阿新 • • 發佈：2019-01-26
實現的是非同步重新整理登入功能，返回出錯資訊時不重新整理頁面。
前端程式碼：
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <!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=GBK"> <title>struts2+ajax返回json型別資料</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <h5>登入</h5> <br /> <form action="#" method="post"> <label for="username">使用者名稱：</label><input type="text" name="username" /> <label for="password">密碼：</label><input type="password" name="password" /> <input type="button" class="btn" value="登入"/> </form> <br /> <h5>錯誤資訊</h5> <br /> <ul> <li><span id="error"></span></li> </ul> <script type="text/javascript"> /* 提交結果，執行ajax */ function btn(){ var $btn = $("input.btn");//獲取按鈕元素 //給按鈕繫結點選事件 $btn.bind("click",function(){ $.ajax({ type:"post", url:"login",//需要用來處理ajax請求的action name data:{//設定資料來源 username:$("input[name=username]").val(), password:$("input[name=password]").val()//這裡不要加"," 不然會報錯，而且根本不會提示錯誤地方 }, dataType:"json",//設定需要返回的資料型別 success:function(data){ var d = eval("("+data+")");//將資料轉換成json型別，可以把data用alert()輸出出來看看到底是什麼樣的結構 //得到的d是一個形如{"key":"value","key1":"value1"}的資料型別，然後取值出來 if (d.success=="登入成功！") { window.location.href = "index.jsp"; } else { $("#error").text(""+d.error+""); } }, error:function(){ alert("系統異常，請稍後重試！"); }//這裡不要加"," }); }); } /* 頁面載入完成，繫結事件 */ $(document).ready(function(){ btn();//點選提交，執行ajax }); </script> </body> </html>
struts.xml檔案配置如下：
<action name="login" class="com.cn.useraction.LoginAction" method="login"> <!-- 返回json型別資料 --> <result name="success" type="json"> <param name="root">result<!-- result是action中設定的變數名，也是頁面需要返回的資料，該變數必須有setter和getter方法 --></param> </result> <result name="UserNotExist" type="json"> <param name="root">result<!-- result是action中設定的變數名，也是頁面需要返回的資料，該變數必須有setter和getter方法 --></param> </result> <result name="error" type="json"> <param name="root">result<!-- result是action中設定的變數名，也是頁面需要返回的資料，該變數必須有setter和getter方法 --></param> </result> </action>
另外，需要在package標籤中加入json資訊：
<package name="useraction" extends="struts-default,json-default">另外，匯入用到的包：
注意，jsp中url填寫的是action的name，而利用action中返回的不同值來判斷在前端究竟要做什麼工作。
action程式碼如下：
package com.cn.useraction; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; import com.cn.util.DBConnection; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class LoginAction extends ActionSupport { private static final long serialVersionUID = 1L; private String result; private String username; private String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } /** * 使用者名稱與密碼匹配檢查 * * @return 結果標識 字串 success 表示匹配成功 UserNotExist表示使用者不存在 error 表示匹配失敗 */ private String userCheck() { String name = null; String pass = null; Connection conn = DBConnection.getConn(); String sql = "select * from users where username='" + username + "'"; PreparedStatement pstmt; try { pstmt = conn.prepareStatement(sql); ResultSet rs = pstmt.executeQuery(); while (rs.next()) { name = rs.getString("username"); pass = rs.getString("password"); ActionContext.getContext().getSession().put("userflag", rs.getString("flag")); } rs.close(); pstmt.close(); conn.close(); } catch (SQLException e) { e.printStackTrace(); } if (name == null)// 驗證使用者名稱是否存在 return "UserNotExist"; else if (name.equals(username) && pass.equals(password))// 驗證登入使用者名稱與密碼是否匹配 return "success"; else return "error"; } /** * 處理ajax請求 * @return SUCCESS */ public String login() throws Exception { if (userCheck().equals("success")) { ActionContext.getContext().getSession().put("username", username); //將資料儲存在map裡，再轉換成json型別資料，也可以自己手動構造json型別資料 Map<String,Object> map = new HashMap<String,Object>(); map.put("success", "登入成功！"); JSONObject json = JSONObject.fromObject(map);//將map物件轉換成json型別資料 result = json.toString();//給result賦值，傳遞給頁面 return "success"; } else if (userCheck().equals("UserNotExist")) { //將資料儲存在map裡，再轉換成json型別資料，也可以自己手動構造json型別資料 Map<String,Object> map = new HashMap<String,Object>(); map.put("error", "登入失敗：使用者名稱不存在或使用者名稱為空！"); JSONObject json = JSONObject.fromObject(map);//將map物件轉換成json型別資料 result = json.toString();//給result賦值，傳遞給頁面 return "UserNotExist"; } else { //將資料儲存在map裡，再轉換成json型別資料，也可以自己手動構造json型別資料 Map<String,Object> map = new HashMap<String,Object>(); map.put("error", "登入失敗：密碼錯誤或未知的異常！"); JSONObject json = JSONObject.fromObject(map);//將map物件轉換成json型別資料 result = json.toString();//給result賦值，傳遞給頁面 return "error"; } } }
完成收工！