playframework中ajax的应用例子(jQuery)

playframework中默认的JS类库是jquery。下面就是一个下拉列表更新的操作，

从catalog这个下拉列表选出一项，之后ajax请求后台，更新subcatalog这个下拉列表里面的值：

还有一段清空select里面option的代码，注意循环从大到小，才清的干净，本例中保留了一个默认的。

 <mce:script type="text/javascript"><!--
 $(function(){
     var subCatalogAction = #{jsAction @ajaxSubcatalog(':subcatalogid')/};
     $('#catalog').change(function(){
         var index = this.value;
         if(!!index){
             $.get(subCatalogAction({subcatalogid:index}), function(reval){
                 if(!(reval instanceof Object)){
                     alert("服务器忙，请稍后再试！");
                     return false;
                 }
                 var oOptions = document.getElementById("subcatalog").options;
                 var oLength = oOptions.length;
                 for(j = oLength ; j > 0 ; j --){
                     oOptions.remove(j);
                 }
                 for(i = 0 ; i < reval.length; ++ i){
                     var oOption = document.createElement("OPTION");
                     oOptions.add(oOption);
                     oOption.innerText = reval[i].subcatalogname;
                     oOption.value = reval[i].id;
                 }
             });
         }else{
             alert("请选择分类");
             return false;
         }
     });
 });
 // --></mce:script>

<mce:script type="text/javascript"><!-- $(function(){ var subCatalogAction = #{jsAction @ajaxSubcatalog(':subcatalogid')/}; $('#catalog').change(function(){ var index = this.value; if(!!index){ $.get(subCatalogAction({subcatalogid:index}), function(reval){ if(!(reval instanceof Object)){ alert("服务器忙，请稍后再试！"); return false; } var oOptions = document.getElementById("subcatalog").options; var oLength = oOptions.length; for(j = oLength ; j > 0 ; j --){ oOptions.remove(j); } for(i = 0 ; i < reval.length; ++ i){ var oOption = document.createElement("OPTION"); oOptions.add(oOption); oOption.innerText = reval[i].subcatalogname; oOption.value = reval[i].id; } }); }else{ alert("请选择分类"); return false; } }); }); // --></mce:script>  

里面@ajaxSubcatalog 对应的是当前Controller目录下的ajaxSubcatalog方法。

下面是Application里面的ajaxSubcatalog的这个方法

 public static void ajaxSubcatalog(Long catalogid){
         if(null != catalogid){
             List<SubCatalog> list = SubCatalog.find("catalogid = ?", catalogid).fetch();
             renderJSON(list);
         }else{
             renderJSON("");
         }
     }

public static void ajaxSubcatalog(Long catalogid){ if(null != catalogid){ List<SubCatalog> list = SubCatalog.find("catalogid = ?", catalogid).fetch(); renderJSON(list); }else{ renderJSON(""); } }

 

最后是route配置文件里面的配置

 GET     /application/ajaxSubcatalog/                            Application.ajaxSubcatalog