实现的是异步刷新登录功能,返回出错信息时不刷新页面。
前端代码:
<%@ 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"; 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"; } } }
原文地址:http://blog.csdn.net/ll328062201/article/details/41576897