2010.6.22(4)——struts 2+jquery ajaxアプリケーション2

12196 ワード
jquery ゲーム Ajax Json struts
2010.6.22(4)——struts 2+jquery ajaxアプリケーション2
参考:
http://huqilong.blog.51cto.com/53638/136802/
Struts 2でjsonpluginとjqueryを使ってajax機能を完成します。
1.      以下のURLから
http://code.google.com/p/jsonplugin/downloads/listはJSONプラグインのJARパッケージ（新バージョンは0.32）をダウンロードし、プロジェクトの該当ディレクトリに追加する。下記のURLから
http://docs.jquery.com/Downloading_jQueryはjqueryに必要なファイルをダウンロードします。安定バージョンをダウンロードすることを提案します。そうしないと意味不明なエラーが発生します。
2.      対応するxmlファイルを設定して、ajax要求のためにデータを提供します。
<?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>
    <package name="sajax" extends="json-default" namespace="/book">
        <action name="getAjaxBookChannelList" method="getAjaxBookChannelList" class="bookChannelAction">
            <result type="json" />
        </action>
        <action name="getAjaxBookCategoryListByChannelID" method="getAjaxBookCategoryListByChannelID" class="bookChannelAction">
            <result type="json" />
        </action>
    </package>
</struts>
2つの構成は通常のaction構成と違って、1つはjson-defaultを拡張したもので、json-defaultはjsonplugin-00030.jarパッケージのstruts-plugin.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>
    <package name="json-default" extends="struts-default">
        <result-types>
            <result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
        </result-types>
        <interceptors>
            <interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
        </interceptors>
    </package>
</struts>
もう一つは、戻りタイプをjson＜result type=「json」と定義し、レスポンスの戻りデータをJsonオブジェクトに変換します。
3.アクションでの定義。戻るオブジェクトを定義し、get、setメソッドを追加します。戻ってきたデータは必要に応じてjson形式（json形式は｛1：test、2：test｝）になります。例えば、2級リストにコンテンツを充填するデータを提供します。ページを巡回する必要があるので、json形式にしても便利です。アクションコード(部分)は以下の通りです。
  
    
public String getAjaxBookChannelList() {
       StringBuffer sb = new StringBuffer();
       bookChannelList = bookService.getBookChannelList();
       if (bookChannelList.size() > 0) {
           int j = bookChannelList.size();
           sb.append("{");
           for (int i = 0; i < j; i++) {
              BookChannel bc = (BookChannel) bookChannelList.get(i);
              sb.append(bc.getId());
              sb.append(":");
              sb.append("\"");
              sb.append(bc.getName());
              sb.append("\"");
              if (i != (j - 1))
                  sb.append(",");
           }
           sb.append("}");
       }
 
       strAjaxChannel = sb.toString();//     
 
       return Action.SUCCESS;
    }
4ページの操作。Jqueryではajax要求のためのいくつかの方法が提供されていますが、もし戻ってきたのがjsonオブジェクトであれば、使用します。
jQuery.getJSON(url,[data],[callback])     ，
 
jQuery.getJSON(url,[data],[callback])    HTTP GET      JSON   。
 
   
XMLHttpRequest
 
  
url (String) :       。
data (Map) : (  )     Key/value   。
callback (Function) : (  )          。
パラメータ部分では、ブラウザのキャッシュはurlとして表示されていますが、urlが同じであればキャッシュ中のデータを使用します。キャッシュを使用したくないなら、パラメータに乱数を加えることができます。
jQuery.each(obj,callback)
      ，          
  
object (Object) :           。
callback (Function) : (  )     /         。
          ：               ，           。
Jquery              : $(“# categoryId”)[0].options.add(option);
ページコードは以下の通りです。
<. language="." type="text/." src="/.s/jquery-1.2.2.js"></.>
<. language=".">
       function fillChannel(id){
              var url = "/book/getAjaxBookChannelList.action";
              $.getJSON(url,{ran:Math.random()},function(json){
                     if(json.strAjaxChannel.length > 0){
                            var obj = .('(' + json.strAjaxChannel + ')');
                            $.each(obj,function(i,n){
                          option = new Option(n,i);
                          if(i==id)option.selected=true;
                         document.getElementById("channellistId").options.add(option);
                      });
                      option = new Option("    ",999);
                      if(id == 999)option.selected=true;
                      document.getElementById("channellistId").options.add(option); 
                  }
               else{
                           option = new Option("    ");
                           document.getElementById("channellistId").options.add(option);
                  }
                     }
              );    
       }
       function fillCategory(chid,bid){
              document.getElementById("categoryId").options.length=1;
              var url = "/book/getAjaxBookCategoryListByChannelID.action";
              var cid = 0;
              if(chid > 0){
                     cid = chid;
              }
              else{
                     cid = document.getElementById("channellistId").value;
              }
              $.getJSON(url,{channelID:cid,ran:Math.random()}, function(json){
        //     ID    ，function(json)     ，  json        
                       if(json.strAjaxCategory.length > 0){
                                   var obj = .('(' + json.strAjaxCategory + ')');// json     json  ，     
                                   $.each(obj,function(i,n){  //jquery      ，
                                 option = new Option(n,i);
                                 if(i==bid)option.selected=true;
                                document.getElementById("categoryId").options.add(option);
                             });
                                  option = new Option("    ","-3");
                                  if(bid ==-3)option.selected=true;
                                  document.getElementById("categoryId").options.add(option);
                                  //jquery    :$(“# categoryId”)[0].options.add(option);
                  }
                  else{
                           if(cid == 999){
                                  option = new Option("    ","-1");
                                  document.getElementById("categoryId").options.add(option);                              
                           }
                           else{
                                  option = new Option("    ");
                                  document.getElementById("categoryId").options.add(option);
                           }
                  }
                     }
              );           
       }
 
       function fillSelect(chid,cid){
              fillChannel(chid);
              fillCategory(chid,cid);
       }
</.>
<body <s:if test="bookCategory.bookchannelId >0">onLoad="fillSelect(<s:property value="bookCategory.bookchannelId"/>,<s:property value="bookCategory.id"/>);"</s:if><s:if test="bookCategory==null">onLoad="fillChannel(0);"</s:if>>
 
    
         <select name="channellistId" id="channellistId" onChange="fillCategory(<s:if test="bookCategory.bookchannelId >0">0,</s:if><s:property value="categoryId"/>);"><option>    </option></select>
         <select name="categoryId" id="categoryId"><option>    </option></select>
直接アクセス
http://manager.17k.com/book/getAjaxBookChannelList.action
次のような内容が得られました。
{"ajaxBookCategoryListByChannelID":"success","ajaxBookChannelList":"success","bcID":0,"bchID":0,"bookCategory":null,"bookCategoryAllList":null,"bookCategoryByChannelID":"success","bookCategoryByID":null,"bookCategoryList":null,"bookCategoryListModel":null,"bookChannel":null,"bookChannelList":[{"createdate":"2008-07-09T10:23:36","id":1,"name":"    ","prefix":"changxiao","status":0},{"createdate":"2008-07-09T10:24:03","id":2,"name":"    ","prefix":"yy","status":0},{"createdate":"2008-07-09T10:24:25","id":3,"name":"    ","prefix":"dushi","status":0},{"createdate":"2008-07-09T10:24:38","id":4,"name":"    ","prefix":"ss","status":0},{"createdate":"2008-07-09T10:24:54","id":5,"name":"    ","prefix":"nvxing","status":0},{"createdate":"2008-07-09T10:25:11","id":6,"name":"    ","prefix":"dongman","status":0},{"createdate":"2008-07-09T10:25:24","id":7,"name":"    ","prefix":"kongbu","status":0},{"createdate":"2008-07-09T10:25:35","id":8,"name":"    ","prefix":"www","status":0},{"createdate":"2008-07-09T10:25:46","id":9,"name":"    ","prefix":"www","status":0}],"channelID":0,"currentPage":0,"info":"","msg":"","pageSize":0,"srcID":0,"strAjax":"","strAjaxCategory":"","strAjaxChannel":"{1:\"    \",2:\"    \",3:\"    \",4:\"    \",5:\"    \",6:\"    \",7:\"    \",8:\"    \",9:\"    \"}","tarID":0,"theBookCategory":"success","theBookChannel":"success","toID":0}
jsonpluginのプログレッシブ化については、a.プログレッシブされたくない属性については、彼のget方法の前にコメントを付けることができる。      @JSON(serialize=false)b.jsonの結果属性名を変更したい場合は、彼のget方法の前にコメントを付けることができます。@JSON(name="属性名")c.tranient修飾子とGetterの方法がないフィールド(field)がシリアル化されません。
struts 2の下でjsonplugin、jqueryの使うことについて、私もあまり熟知しないで、みんなはいっしょに学ぶようにしましょう。
参考資料：
Struts 2とAJAX
http://hi.baidu.com/clking419/blog/item/503abb18079b250535fa41b5.html
360雲盤のオフラインを探してダウンロードします。
TreeSet類のオブジェクトの比較