欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Ext与Struts2结合使用

程序员文章站 2022-03-26 23:02:11
...
Ext js2.2登陆（struts2+json）方法

1、struts2类包
Commons-logging-1.0.4.jar
Freemarker-2.3.12.jar
Ognl-2.6.11.jar
Struts2-core-2.1.2.jar
Xwork-2.1.1.jar
Commons-fileupload-1.2.1.jar
Commons-io-1.3.2.jar

2、web.xml 
<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
<filter> 
<filter-name>struts2</filter-name> 
<filter-class> 
org.apache.struts2.dispatcher.FilterDispatcher 
</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>struts2</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
<welcome-file-list> 
<welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 
</web-app>

3、struts.xml 
<!DOCTYPE struts PUBLIC 
     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
     "http://struts.apache.org/dtds/struts-2.0.dtd"> 
<struts> 
<package name="user" extends="struts-default"> 
<action name="login" class="org.ext.service.loginAction"> 
<result name="success">jsondate.jsp</result> 
</action> 
</package> 
</struts>


4、login.jsp 
<%@ page language="java" pageEncoding="gbk"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>wayfoon</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<link rel="stylesheet" type="text/css" href="./ext/css/ext-all.css"> 
<script type="text/javascript" src="./ext/js/ext-base.js"></script> 
<script type="text/javascript" src="./ext/js/ext-all.js"></script> 
<script type="text/javascript" src="./ext/js/ext-lang-zh_CN.js"></script> 
<style type="text/css"> 
.user { 
background: url(./images/user.gif) no-repeat 1px 2px; 
} 

.key { 
background: url(images/key.gif) no-repeat 1px 2px; 
} 

.key,.user { 
background-color: #FFFFFF; 
padding-left: 20px; 
font-weight: bold; 
color: #000033; 
} 
</style> 
<script type="text/javascript"> 
Ext.onReady(function() { 
// 开启表单提示 
Ext.QuickTips.init(); 
// 设置提示信息位置为边上 
Ext.form.Field.prototype.msgTarget = 'side'; 
var win = new Ext.Window({ 
id : 'login-win', 
title : '登陆', 
iconCls : 'tabs', 
width : 300, 
height : 120, 
collapsible : true, 
plain : true, 
// 初始化表单面板 
items : new Ext.form.FormPanel({ 
id : 'login-form', 
labelWidth : 50, // 默认标签宽度板 
labelAlign : 'right', 
buttonAlign : 'center', 
// 不设置该值，表单将保持原样，设置后表单与窗体完全融合 
baseCls : 'header', 
layout : 'form', 
defaults : { 
width : 200 
}, 
// 默认字段类型 
defaultType : 'textfield', 
items : [{ 
name: 'username', 
cls: 'user', 
fieldLabel : '账号', 
allowBlank : false, 
blankText:'帐户不能为空'//错误提示内容 
// 禁止为空 
}, { 
name : 'password', 
inputType : 'password', 
fieldLabel : '密码', 
cls:'key', 
allowBlank : false, 
blankText:'密码不能为空' 
}], 
// 初始化按钮 
buttons : [{ 
text : '登陆', 
type : 'submit', 
handler : function() { 
var but = this; 
                    but.setDisabled(true); 
                    this.setText('正在登陆'); 
    Ext.getCmp('login-form').getForm().submit({ 
waitMsg : '正在登录  ', 
url : 'login.action', 
method : 'POST', 
success : function(form, action) { 
Ext.Msg.alert('信息','成功'); 
but.setDisabled(false); 
}, 
failure : function() { 
Ext.Msg.alert('信息','失败'); 
but.setText("登陆"); 
but.setDisabled(false); 
} 
}); 
} 
},{ 
               text: '取消', 
              handler:function(){Ext.getCmp('login-form').getForm().reset();}//重置表单 
            }] 
}) 
}); 
// 将窗口显示出来 
win.show(); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>


4.1 html、js分离模式
Login.jsp源码 
<%@ page language="java" pageEncoding="gbk"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>wayfoon</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<link rel="stylesheet" type="text/css" href="./ext/css/ext-all.css"> 
<script type="text/javascript" src="./ext/js/ext-base.js"></script> 
<script type="text/javascript" src="./ext/js/ext-all.js"></script> 
<script type="text/javascript" src="./ext/js/ext-lang-zh_CN.js"></script> 
<script type="text/javascript" src="./js/login.js"></script> 
<style type="text/css"> 
.user { 
background: url(./images/user.gif) no-repeat 1px 2px; 
} 
.key { 
background: url(images/key.gif) no-repeat 1px 2px; 
} 
.key,.user { 
background-color: #FFFFFF; 
padding-left: 20px; 
font-weight: bold; 
color: #000033; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Login.js源码 
Ext.onReady(function() { 
// 开启表单提示 
Ext.QuickTips.init(); 
// 设置提示信息位置为边上 
Ext.form.Field.prototype.msgTarget = 'side'; 
var win = new Ext.Window({ 
id : 'login-win', 
title : '登陆', 
iconCls : 'tabs', 
width : 300, 
height : 120, 
collapsible : true, 
plain : true, 
// 初始化表单面板 
items : new Ext.form.FormPanel({ 
id : 'login-form', 
labelWidth : 50, // 默认标签宽度板 
labelAlign : 'right', 
buttonAlign : 'center', 
// 不设置该值，表单将保持原样，设置后表单与窗体完全融合 
baseCls : 'header', 
layout : 'form', 
defaults : { 
width : 200 
}, 
// 默认字段类型 
defaultType : 'textfield', 
items : [{ 
name: 'username', 
cls: 'user', 
fieldLabel : '账号', 
allowBlank : false, 
blankText:'帐户不能为空'//错误提示内容 
// 禁止为空 
}, { 
name : 'password', 
inputType : 'password', 
fieldLabel : '密码', 
cls:'key', 
allowBlank : false, 
blankText:'密码不能为空' 
}], 
// 初始化按钮 
buttons : [{ 
text : '登陆', 
type : 'submit', 
handler : function() { 
var but = this; 
                    but.setDisabled(true); 
                    this.setText('正在登陆'); 
    Ext.getCmp('login-form').getForm().submit({ 
waitMsg : '正在登录  ', 
url : 'login.action', 
method : 'POST', 
success : function(form, action) { 
Ext.Msg.alert('信息','成功'); 
window.location.href ='main.jsp'; 
but.setDisabled(false); 
}, 
failure : function() { 
Ext.Msg.alert('信息','失败'); 
but.setText("登陆"); 
but.setDisabled(false); 
} 
}); 
} 
},{ 
               text: '取消', 
               handler:function(){Ext.getCmp('login-form').getForm().reset();}//重置表单 
            }] 
}) 
}); 
// 将窗口显示出来 
win.show(); 
});

5、jsondate.jsp 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
  <%@ taglib prefix="s" uri="/struts-tags" %> 
<s:property value="jsondate" escape="false"/>


6、loginAction.java 
package org.ext.service; 
public class loginAction { 
  private String username; 
  private String password; 
  private String jsondate=""; 
public String getUsername() { 
return username; 
} 
public String getJsondate() { 
return jsondate; 
} 
public void setJsondate(String jsondate) { 
this.jsondate = jsondate; 
} 
public void setUsername(String username) { 
this.username = username; 
} 
public String getPassword() { 
return password; 
} 
public void setPassword(String password) { 
this.password = password; 
} 
public String execute() throws Exception 
{ 
if(username.equals("zjw") && password.equals("1234")) 
{ 
this.jsondate="{success:true}"; 
} 
else { 
this.jsondate="{failure : true}"; 
} 
return "success"; 
} 
}
相关标签： EXT Struts JSP XML Apache

上一篇： Linux 常见目录

下一篇： linux 编辑、编译链接、执行C语言并发程序

推荐阅读