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 与 Struts2 结合使用，可以充分利用两者的优点，实现前后端分离，提升用户体验并简化开发流程。然而，集成过程中可能会遇到 jar 包冲突的问题。这通常是因为不同库之间的依赖版本不一致，导致类加载器无法...
总结来说，EXT+STRUTS2结合了前端的强大交互性和后端的稳定处理能力，为构建学生信息管理系统提供了高效且灵活的解决方案。理解并掌握这种技术栈，对于提升企业级应用的开发效率和用户体验具有重要意义。
3. **创建EXTJS应用**：定义EXTJS的组件和布局，使用Store和Proxy与Struts2进行数据交互。 4. **Action处理请求**：在Action中处理EXTJS发送的请求，进行业务处理并返回JSON数据。 5. **结果处理**：EXTJS根据接收到...
在"Ext_struts2"这个文件中，可能包含了一个示例项目，展示了如何将EXT与Struts2结合实现文件上传的全过程。这个项目的源码可能包括以下几个部分： 1. HTML/JS：EXT的前端界面，包括文件选择按钮和上传触发器。 2. ...
2. 结合Ext JS：在前端，使用Ext JS构建用户界面，通过AJAX与后端的Struts2 Action进行通信，发送请求并接收响应数据。 3. 配置Struts2 XML：配置Struts2的struts.xml文件，设置Action的路径、方法和结果类型，以便...
通过以上步骤，你就可以成功地将Struts2与EXT集成，构建出既有强大功能又有出色用户体验的Web应用。不过，集成过程中可能会遇到各种问题，比如资源加载、跨域问题、数据同步等，这就需要开发者具备一定的JavaScript...
本文将详细介绍EXT与Struts2的结合使用，并通过标题和描述中的关键词，如“树”、“gridpanel”、“分页”、“文件上传”和“tabpanel”，深入探讨这些组件的应用。 EXT是一个强大的JavaScript库，它提供了丰富的...
总结起来，"ext struts2 swfupload 跨域文件上传"是关于如何使用EXTJS构建前端界面，结合Struts2处理服务器端逻辑，利用SwfUpload的跨域能力实现文件上传的一种解决方案。这个过程中涉及的技术包括JavaScript编程、...
本文将深入探讨一个采用Ext与Struts2框架构建的学生成绩管理系统，以此来解析这两个技术在实际项目开发中的应用。 Ext是Sencha公司推出的一个JavaScript UI库，主要用于创建富客户端应用。其核心特性包括组件化、...
这篇博客文章“Struts2与Ext4.0的json交互”可能会探讨如何在Struts2中配置和使用JSON来与前端的Ext4.0框架进行通信。 首先，我们来看Struts2中的JSON插件。这个插件允许我们在Action类中直接返回JSON对象，无需...
1. **JSON 数据交换**：EXT 使用 AJAX 请求与 Struts2 ACTION 进行通信，ACTION 处理请求后，将结果封装为 JSON 对象返回。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时...
4. 表单处理：EXTJS2的表单组件可以与Struts2的表单验证相结合，实现客户端和服务器端的双重验证。 5. 动态加载：EXTJS2的Ajax功能可以实现页面部分内容的异步加载，提升用户体验。 6. 页面布局：EXTJS2的布局管理...
2. **控制层**：Struts框架处理HTTP请求，协调前端与后端的通信，执行业务逻辑。 3. **模型层**：可能包含业务对象和实体类，封装了应用程序的核心业务逻辑。 4. **数据访问层**：iBatis负责与数据库的交互，如CRUD...
【描述】"Ext+struts Ext学生管理系统"是基于Web的，使用了富客户端技术ExtJS，提供用户友好的图形界面。ExtJS是一个强大的JavaScript库，用于构建具有复杂交互性的前端应用。而Struts则是一个Java Web开发框架，...
Struts2的核心在于Action类，它是业务逻辑处理的主要载体，通过配置文件或注解与前端视图进行交互。 EXT则是一个JavaScript库，用于构建富客户端的Web应用。EXTJS提供了一整套组件化、可定制的UI控件，如表格、表单...
总结来说，"ext json struts 完整无错源码" 是一个很好的学习资源，可以帮助开发者了解如何将现代前端技术（EXT）与后端 Java Web 开发框架（Struts）相结合，通过 JSON 进行数据交换，创建高效、动态的 Web 应用...
《EXT + Struts1.2 图书管理系统：深入解析与实践》 EXT 是一个基于 JavaScript 的前端组件库，它提供了一系列强大的用户界面组件，如表格、图表、菜单、按钮等，用于构建富互联网应用程序（RIA）。EXT 提供的组件...
在 "Ext Desktop + Struts2 实例" 中，开发者将 Ext JS 的桌面应用模型与 Struts2 的后端控制和数据处理能力相结合，实现了前后端分离的架构。下面我们将深入探讨这个组合的各个知识点： 1. **Ext JS 桌面应用（Ext...
Struts2 与 ExtJS 的整合是将这两个强大的框架结合在一起，以构建高效、交互性强的Web应用程序。ExtJS 是一个用于创建富客户端界面的JavaScript库，而Struts2 是一个基于MVC模式的Java Web框架，两者结合可以提供...
通过以上步骤，我们可以实现一个在Struts2框架下，利用Ext3创建前端交互界面，后端使用Apache POI处理Excel文件，TrueZip打包文件，提供批量下载服务的功能。这不仅可以提高用户的下载效率，还简化了后台处理大量...