Struts2+ExtJS+Ajax 登录操作例子

看了好几篇关于这个问题的文章,有些写的清晰,有些写的乱七八糟,但是没一个例子能成功,全按照他们的代码写了,配置也改了,就是不行. 难道是版本问题?

了解了具体实现的流程后,我就打算自己写一个试试,结果还真成功了~ 感觉现在国内技术论坛良莠不齐,很多技术人写出来的文章都乱七八糟,很可能会影响到看过他们文章的人.因此我决定以后得好好写.......以防看过我例子的人被误导..哈哈...

执行流程:在jsp页面引用js代码(步骤2所示),当输入好账号密码后,点击Login,触发form的doAction事件.根据URL传到指定的Action.我这里的Action里有三个field:1.success;2.msg;3.User 作用分别为:1.返回success给前台做登录是否成功的判断;2.返回msg给前台使用;3.域模型. 我这里的Action是固定返回SUCCESS的(也可能有别的方法可以实现) 返回SUCCESS ,在配置文件里找到对应的result 它的类型为JSON,它会将信息response到客户端,最后客户端做判断,即可实现Ajax登录.

环境:MyEclipse2013 struts2.1 win8.1

步骤:

1.使用MyEclipse为project自动生成struts2.1.

2.前台代码:

Ext.onReady(function() {
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'under';
			
			var form = new Ext.FormPanel({
						width : 300,
						height : 150,
						frame : true,
						buttonAlign : 'center',
						labelAlign : 'right',
						labelWidth : 80,
						defaultType : 'textfield',
						defaults : {
							width : 200
						},
						items : [{
									fieldLabel : 'Username',
									name : 'user.username',
									allowBlank : false
								}, {
									inputType : 'password',
									fieldLabel : 'Password',
									name : 'user.password',
									allowBlank : false
								}],
						buttons : [{
							type : 'submit',
							text : 'Login',
							handler : function() {
								if (form.getForm().isValid()) {
									form.form.doAction('submit', {
												url : 'loginAction',
												method : 'post',
												success : function(form, action) {
													Ext.Msg.alert('Tips',
															action.result.msg);
												},
												failure : function(form, action) {
													Ext.Msg.alert('Tips',
															action.result.msg);
												}
											})
								}
							}
						}]
					})

			var win = new Ext.Window({
						title : 'Login Window',
						items : form,
						modal : true,
						resizable : false,
						closable : false
					})
			win.show();
		});

3.作为bean的User的代码:

public class User {
	private String username;
	private String password;
	
	public User() {
		// TODO Auto-generated constructor stub
	}

	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;
	}
}

4.LoginAction代码:

package action;

import bean.User;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport {
	private boolean success;
	private String msg;
	private User user;

	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		if (user.getUsername().equals("admin")
				&& user.getPassword().equals("admin")) {
			this.success = true;
			this.msg = "welcome " + user.getUsername();
		} else {
			this.success = false;
			this.msg = "login failed";
		}
		return SUCCESS;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public User getUser() {
		return user;
	}

	public void setUser(User user) {
		this.user = user;
	}

}

5.struts.xml配置文件代码:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<constant name="struts.devMode" value="true" />
	<package name="default" namespace="/" extends="json-default">
		<action name="loginAction" class="action.LoginAction">
			<result type="json" />
		</action>
	</package>
</struts>