本文地址:[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請求:

命令行輸出內容:

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 組件查詢方法總結