struts2 + jquery + json模拟登陆效果
1、新建工程,添加struts2必需jar包及相应版本的struts2-json-plugin-X.jar
2、在web.xml增加下面的struts2的配置;
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> <init-param> <param-name>struts.i18n.encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
3、在src目录下增加新建一个struts.xml配置文件,其内容如下:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <!--当struts.xml配置文件修改后,系统是否重新加载该文件,开发阶段打开此功能 --> <constant name="struts.configuration.xml.reload" value="true" /> <!-- 指定WEB应用的编码集,相当于调用HttpServletRequest.setCharacterEncodint方法,如果使用了velocity或freemarker,它也用于指定输出的编码格式 --> <constant name="struts.i18n.encoding" value="UTF-8" /> <!-- 指定请求后缀为.action,指定多个请求后缀用逗号分隔 --> <constant name="struts.action.extension" value="action" /> <!--设置浏览器是否缓存静态内容,建议:开发阶段关闭,运行时开启 --> <constant name="struts.serve.static.browserCache" value="false" /> <!-- 开发提示:出错时打印更详细的信息--> <constant name="struts.devMode" value="true" /> <!-- 这样配置后就可以再action的name元素中使用“/” --> <constant name="struts.enable.SlashesInActionNames" value="true"/> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <package name="ssh" extends="json-default"> <action name="login" class="com.starit.action.LoginAction"> <result type="json"></result> </action> </package> </struts>
4、写测试登陆页面及JS文件:
<%@ page contentType="text/html; charset=GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Struts2|JQuery|Json</title>
<SCRIPT type="text/javascript" src="resources/js/jquery.js"></script>
<SCRIPT type="text/javascript" src="resources/js/login.js"></SCRIPT>
</head>
<body>
<div id="msg"></div>
username:
<input name="username" id="username" type="text" />
<br />
password:
<input name="password" id="password" type="password" />
<br />
<input type="submit" id="submit" value="login">
</body>
</html>
login.js:
$(document).ready(function() { // 直接把onclick事件写在了JS中 $("#submit").click(function() { $.ajax({ url : "login.action",// 后台处理程序 type : "post", // 数据发送方式 dataType : "json",// 接收数据格式 //dataType : "text", data : "user.username="+$("#username").val() + "&user.password="+$("#password").val(),// 要传递的数据 // 回传函数 timeout:20000,// 设置请求超时时间(毫秒)。 error: function () {// 请求失败时调用函数。 $("#msg").html("请求失败!"); }, /* success:function(data){ //请求成功后回调函数。 var dataObj=eval("("+data+")");//如果dataType是text则需要转换为json对象 $("#msg").html(dataObj.message); alert("用户名:"+dataObj.user.username+",密码:"+dataObj.user.password); }*/ success:function(data){ // 请求成功后回调函数。如果dataType是json不就需要再转换为json对象 $("#msg").html(data.message); alert(data); alert("用户名:"+data.user.username+",密码:" + data.user.password); } }); }); });
5、这里接收前台数据使用对象属性的方式,下面写一个User类,内容如下:
/**
* File : User.java
* Author : zqding
* Date : 2010-7-22
* Desc :
*/
package com.starit.bean;
import java.io.Serializable;
public class User implements Serializable {
private static final long serialVersionUID = -8644381589680156624L;
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;
}
}
6、再增加一个控件逻辑LoginAction类,其内容如下:
/**
* File : LoginAction.java
* Author : zqding
* Date : 2010-7-22
* Desc :
*/
package com.starit.action;
import com.opensymphony.xwork2.ActionSupport;
import com.starit.bean.User;
public class LoginAction extends ActionSupport {
private static final long serialVersionUID = -94733813417893940L;
private User user;
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String execute() throws Exception {
if ("zqding".equals(user.getUsername()) && "zqding".equals(user.getPassword())) {
message = "登陆成功!";
System.out.println("user:" + user.getUsername() + "pass:" + user.getPassword());
} else {
message = "用户名/密码有误!";
}
return "success";
}
}
7、发布到应用服务器,进行测试。
http://localhost:9090/SSH/login.jsp