Ext与Struts2结合使用

程序员文章站 2022-03-26 21:06:27

...

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>

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 combobox 下拉多选框带搜索功能 EXT

下一篇： php关闭warning问题的解决方法_php技巧

Ext与Struts2结合使用

浅要分析Python程序与C程序的结合使用

socket io与vue-cli的结合使用的示例代码

Bootstrap进度条与AJAX后端数据传递结合使用实例详解

JSPSupportServlet Struts2与FreeMarker配合使用

Vue中JS动画与Velocity.js的结合使用

vue指令之表单控件绑定v-model v-model与v-bind结合使用

Docker的使用初探（二）：Docker与.NET Core的结合

基于jquery的文本框与autocomplete结合使用(asp.net+json)

vue2.0 与 bootstrap datetimepicker的结合使用实例

解析GridView自带分页及与DropDownList结合使用