本文地址:[http://blog.csdn.net/sushengmiyan/article/details/43487751](http://blog.csdn.net/sushengmiyan/article/details/43487751)
本文作者:[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示。现在有一个问题是struts2对于url的跳转action支持比较良好,但是对于像Extjs这样,ajax请求的,无url跳转的实现,还是需要一点点技巧的。本文实例讲解一个Ext.Ajax.request的请求实例,返回后台处理之后的结果。
### 步骤一:创建struts2的配置文件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>
<constant name="struts.devMode" value="true" />
<package name="basicstruts2" extends="struts-default">
<action name="index">
<result>/index.jsp</result>
</action>
</package>
</struts>
~~~
这个文件需要放置在src目录下,可以在下载的struts2中的webapp下找一个文件来直接使用,不需要自己一行代码一行代码的去敲,毕竟我们会使用就可以了。
### 步骤二:对web.xml修改,增加struts2的支持
~~~
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
~~~
这表示struts2会接管所有的请求,这样我们前台的请求都会纳入struts2的支持了
### 步骤三:增加struts2核心jar包以及struts2依赖的jar包
需要的jar包邮以下几个:
1.commons-fileupload-1.3.1.jar
2.commons-io-2.2.jar
3.commons-lang3-3.2.jar
4.freemarker-2.3.19.jar
5.javassist-3.11.0-GA.jar
6.ognl-3.0.6.jar
7.struts2-core-2.3.20.jar
8.xwork-core-2.3.20.jar
这8个jar包都可以在struts2的lib包里面找到,拷贝到项目lib目录下就可以了,依赖的jar包之前有专门罗列过,参照:
[http://blog.csdn.net/sushengmiyan/article/details/43272061](http://blog.csdn.net/sushengmiyan/article/details/43272061)
到此为止,我们的项目就配置成功了struts2,怎么去验证成功与否呢?我们使用extjs写一个ajax的request
### 步骤四:书写前台ajax请求
~~~
Ext.Ajax.request({
url: 'foo',
async: false,
success: function(response) {
debugger;
var data = Ext.decode(response.responseText);
console.log(data);
}
});
~~~
这里使用Ext.Ajax.request发送请求,指定了url为foo这个url就对应着struts2的一个action连接。我这里不太喜欢配置xml文件,而是喜欢使用struts2的注解的方式来实现跳转,所以下一步,增加一个注解插件
### 步骤五 增加struts2的注解插件
jar包增加struts2-convention-plugin-2.3.20.jar
步骤六:熟悉后台实现代码
在src目录下增加自己的实现类
我这里新建了一个包com.oasystem.action
新增一个类TestAction
~~~
package com.oasystem.action;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import com.opensymphony.xwork2.ActionSupport;
public class TestAction extends ActionSupport {
private static final long serialVersionUID = 5316344216452587235L;
private String _dc;
//这里就是使用注解指定struts2 action调用的地方
@Action(value = "/foo")
//方法设置成了void 不需要返回数据之间将数据写回到response中了
public void foo() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
String abc = "{'a':'测试'}";
try {
response.getWriter().write(abc);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
};
public String get_dc()
{
return this._dc;
};
public void set_dc(String dc)
{
this._dc = dc;
};
}
~~~
OK测试一下,启动tomcat服务器,执行这个ajax请求:
![](https://box.kancloud.cn/2016-02-03_56b214ec7c97f.jpg)
命令行输出内容:
![](https://box.kancloud.cn/2016-02-03_56b214ec96d91.jpg)
OK到现在,就已经成功将struts2与sencha extjs实现了关联。所有的后台都可以由struts2来接管了。
- 前言
- [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么
- [ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来
- [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
- [ExtJS5学习笔记]第十二节 Extjs5开发遇到的问题列表记录
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- [ExtJS5学习笔记]第十四节 Extjs5中data数据源store和datapanel学习
- [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
- [ExtJS5学习笔记]第十六节 Extjs5使用panel新增的ViewModel属性绑定数据
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
- [ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
- [ExtJS5学习笔记]第十九节 Extjs5中通过设置form.Panel的FieldSet集合属性控制多个field集合
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
- [ExtJS5学习笔记]第二十二节 Extjs5中使用beforeLabelTpl配置给标签增加必填选项星号标志
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
- [EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word =&gt; debugger;)
- [ExtJS5学习笔记]第二十八节 sencha ext js 5.1.0发布版本正式发布 extjs doc下载地址
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
- [ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结