[ExtJS5學習筆記]第三十二節 sencha extjs 5與struts2的ajax互動配置

標籤：extjs5   struts2   

本文地址：http://blog.csdn.net/sushengmiyan/article/details/43487751

本文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

到此為止，我們的項目就配置成功了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 blocke.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 extjs 5與struts2的ajax互動配置