国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > struts2+ajax+json实现用户登录

struts2+ajax+json实现用户登录

来源:程序员人生   发布时间:2014-12-18 08:49:20 阅读次数:3233次

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

前端代码:

<%@ 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是1个形如{"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"; } } }

完成收工!

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------

上一篇 对Fragment切换的优化

下一篇 周鸿

分享到:
------分隔线----------------------------
关闭
程序员人生