struts2+ajax+json實現使用者登入，struts2json
實現的是非同步重新整理登入功能，返回出錯資訊時不重新整理頁面。
前端代碼：
<%@ 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>
<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 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";elsereturn "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";}} }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
