struts2+ajax+json實現使用者登入

struts2+ajax+json實現使用者登入

實現的是非同步重新整理登入功能，返回出錯資訊時不重新整理頁面。

前端代碼：

<%@ page language="java" contentType="text/html; charset=GBK"    pageEncoding="GBK"%>struts2+ajax返回json類型資料<script type="text/javascript" src="js/jquery.js"></script>        登入        
                
        錯誤資訊        
        
 
            
  
        
 
      <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>

struts.xml檔案配置如下：

                            result                                        result                                        result            

另外，需要在package標籤中加入json資訊：

另外，匯入用到的包：

注意，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 map = new HashMap();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 map = new HashMap();map.put("error", "登入失敗：使用者名稱不存在或使用者名稱為空白！");          JSONObject json = JSONObject.fromObject(map);//將map對象轉換成json類型資料result = json.toString();//給result賦值，傳遞給頁面return "UserNotExist";} else {//將資料存放區在map裡，再轉換成json類型資料，也可以自己手動構造json類型資料Map map = new HashMap();map.put("error", "登入失敗：密碼錯誤或未知的異常！");          JSONObject json = JSONObject.fromObject(map);//將map對象轉換成json類型資料result = json.toString();//給result賦值，傳遞給頁面return "error";}}    }

完成收工！