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";
}
}
}
完成收工!
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠