前言

我想大家都有需要在web系統上，使用動態查詢的功能。只要在查詢欄位上輸入查詢關鍵字，系統就直接顯示出查詢結果。企業需求在於：

不要再做任何的點擊動作，
整個頁面不用重新整理。

聽說最近jQuery很紅；也正好搭配新學習的Struts2，示範一下如何應用Struts2。僅管這標題下得有點像是論文題目，不過內容肯定沒那麼嚴謹。所以大家可以放輕鬆看一下。這篇主要的目的，雖然在講解如何達成動態資料查詢的這項企業需求，不過也會再稍微講解一下裡面的東西。一樣的；也都是分2階段：簡單的，和詳盡的─知其然，與知其所以然。

架構

基本上，需求很簡單，就是在頁面上的一個input欄位，輸入查詢關鍵字，畫面即時呈現所查詢的資料結果。

知其然

基本上是使用struts2、jquery 2個框架；不過struts2有再額外新增json-plgin

pom.xml

搭配Maven

<dependency>
    <groupId>taglibs</groupId>
    <artifactId>standard</artifactId>
    <version>1.1.2</version>
</dependency>
<dependency>
    <groupId>org.apache.struts</groupId>
    <artifactId>struts2-json-plugin</artifactId>
    <version>${struts2.version}</version>
</dependency>

strts.xml

<package name="taichitech" extends="struts-default, json-default" namespace="/">
    <action name="searchData" class="taichitech.jblog.struts2.SearchData" method="searchData">
        <result type="json" name="success">
        </result>
    </action>
</package>

其中一個重點在於需要繼自json-default package。

Java action

Struts2 action的部份

private String condition;

private Map<String, Object> returnData;

public String searchData() {
    logger.debug("Search condition: {}:", condition);
    returnData = new HashMap<String, Object>();

    char[] conditions = condition.toCharArray();
    StringBuffer reg = new StringBuffer();
    for (char c : conditions) {
        reg.append(".*");
        reg.append(c);
    }
    reg.append(".*");
    String regex = reg.toString();
    ArrayList<DataVo> vos = new ArrayList<DataVo>();
    for (DataVo dataVo : DATA_SET) {
        if (dataVo.getName().matches(regex) || dataVo.getUrl().matches(regex)) {
            vos.add(dataVo);
        }
    }
    returnData.put("SEARCH_RESULT", vos);
    returnData.put("COUNT", vos.size());
    return SUCCESS;
}
// Getters and setters of returnData、 condition.

上段程式碼，有用了一個vo；Vo有2個property、name與url。

public class DataVo {
    DataVo(String name, String url) {
        this.name = name;
        this.url = url;
    }
    private String name;
    private String url;
//Getters and setters
}

JSP script

JSP script 部份

<script language="javascript">
    var showdata = function() {
        $.ajax({
            url : "${pageContext.request.contextPath}/searchData.action",
            type : "POST",
            async : "false",
            data : {
                'condition' : $("#condition").val()
            },
            dataType : "json",
            success : function(jsonData) {
                var html = '';
                $.each(jsonData.returnData.SEARCH_RESULT, function(index, val){
                    html=html+val.url+'<br/>';
                });
                html+="Total: "+ jsonData.returnData.COUNT;
                $("#searchResult").html(html);
            }
        });
    };
</script>

JSP Html

JSP Html的部份，單純到不行…

<form>
    Search: <input id="condition" type="text" onkeyup="showdata(this);" />
    <div id="searchResult"></div>
</form>

結果

知其所以然

前面沒有提到的

基本上，我們的這套demo是使用struts2與jquery，上面沒有展示到的部份是，如何引用jQuery。我將程式碼補列列在下面。

在jsp中引用jQuery；jQuery的檔案放在/js目錄下。

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.10.4.min.js"></script>

有關於pom.xml

這個展示使用了maven的方式。使用maven可以讓我只要copy paste簡單的幾個dependence，就可以自動匯入jar檔了！而且好處還在於可以省略許多不用的jar檔。在沒有maven的時候，從各官網下載下來的package，總包山包海，但我其實並沒有需要使用到那個framework所有的模組，可是在一開始學習的時候，時常搞不清楚那些jar檔該放、那些jar檔不該放。使用maven會幫你將這個問題處理掉。

在pom的部份，我並沒有撰寫struts-core的部份jar檔，但是我有指定說我要使用struts2-json。Maven 會自動的將所需要使用到的模組由repository下載下來。

你可以參考：

Maven 101：淺談Maven
Maven 官網

有關於struts.xml

這是很簡單的struts(struts2) 的宣告。全部的程式碼，與之前所列的沒有太大的差異，就請各位讀在在實作的時候，請自行補足缺少的部份。唯一個需要注意的重點是你的action必需要繼承json-default這個package。

圖片引用自網路。缺少的部份程式碼，請各位自行補充了。

有關於Java action

Action的部份，有2個重點。

其中一個是屬性的部份。

網頁的輸入會被存入condition這個property，回傳的資料以Map的型態儲存。主要查詢結果資料集，key值是SEARCH_RESULT；另外還有一個key為COUNT的資料，代表著查詢出來的結果筆數。如何取得這2個資訊，當然是依系統而有不同的實作，case by case。請注意，這裡的根結點，是action部份。你可以在struts.xml加上<param name="root">，額外指定根結點。

struts.xml

<action ... >
    <result type="json" name="success">
        <param name="root">returnData</param>
    </result>
</action>

直接呼叫Struts2Action，檢視回傳結果。 Struts2回傳的資料只是單純的文字格式

加上了<param name="root"> 回傳值與之前的不一樣。根結點由returnData開始

第2個重點是searchData() 這個method。

searchData()是主要的搜尋程式邏輯所在。他依據使用者所輸入字元，對資料集進行搜尋，使用者每次在查詢輸入欄位每敲一個字，就會對server做一次request，可想而之，其實這種企業功能是很秏資源的。當然這部份是可以再加強的部份，不過這已經超過本篇範籌了。

搜尋的部份，使用了正規表示的功能。

這裡分解使用者的輸入，使用了迴圈，產生表示式，並對資料加以比對。比對的部份，包含了DataVo的name與url2個屬性。在這樣的程式下，你可以輸入ggc查詢到googole.com，只要name或url符合都會被篩選出來。當然這部份也是case by case。

JSP script 的部份

JavaScript的部份，使用了jQuery。 Ajax 的部份，是使用了ajax()這支method。

jQuery.ajax( url [, settings ] )

延伸參考 jQuery 官方 API:

jQuery ajax() API

特別強調以下幾點：

data：需要傳回server的參數。必需為VO、String、或是Array。 VO是key-value的型態。預設會以GET的方式加在URL後。
dataType：預計從server要回傳的資料型態。你可以有xml, json, script, or html這些選項。如果不指定的話，jQuery會自己猜…，這種不確定的東西，還是指定比較恰當。
type：也可以用method。表jQuery提交資料的方式。預設是GET。以資安來說，太危險了，請一定要用POST。
async：說明request以同步或非同步的方式傳送給server。預設是非同步。非同步的好處，雖然看似可以加快反應速度，但是也同時表示，在資料還沒有完全傳送完畢前，後端就可以開始動作；如果開始處理還沒傳送過來的資料有可能就會出事。
success：像success: function(){};裡的function 稱為callback function。表示jQuery在表示success後會繼處理function裡面的部分。
jsonData：雖然以struts2 的Action回傳的結果，看似是json型態，可是在jQuery 1.5以後，jsonData卻被封裝成名為jqXHR(jQuery自己的XmlHttpRequest)的物件。
jQuery並不認回資料只是單純的文字檔

範例上直接使用jsonData.returnData.SEARCH_RESULT取得集合，將資料傳給接下來的jQuery的each()。
each()有2種，參數是array或是object。如果是object ，則必需是key-value的格式。。詳細格式是這樣：

jQuery.each( array, callback )
callback
Type: Function( Integer indexInArray, Object value )

jQuery.each( object, callback )
callback
Type: Function( String propertyName, Object valueOfProperty )

你還可以參考： jQuery Each API doc

結語

這裡展現了一個完整的實作，可以進行動態查詢。所使用的技術，包含jQuery、Json、Struts2、Maven。文中你可以看到struts2使用result type='jason'的回傳結果。文中也稍微介紹了jQuery ajax()與each()2支api的用法。

太極科技

Google Prettify

2015-05-27

如何使用jQuery達成動態查詢資料─以jQuery傳送Json給Struts2

前言

架構

知其然