码迷,mamicode.com
首页 > Web开发 > 详细

struts2+ajax+json实现用户登录

时间:2014-11-28 18:24:12      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:web前端   json   struts2   ajax   异步   

实现的是异步刷新登录功能,返回出错信息时不刷新页面。

前端代码:

<%@ 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">

另外,导入用到的包:

bubuko.com,布布扣

注意,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";
		}
	}
    
}

完成收工!

struts2+ajax+json实现用户登录

标签:web前端   json   struts2   ajax   异步   

原文地址:http://blog.csdn.net/ll328062201/article/details/41576897

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!