DWR入门与应用（二）

最新推荐文章于 2024-07-25 11:52:08 发布

hakunamatata2008

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量560

点赞数

分类专栏： ajax 文章标签： dwr string function html list javascript

ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

假设您要从资料库中查询出一些字串，然后填写到表单的下拉选单中。

例如一个示意的Java程式如下：

  package onlyfun.caterpillar; 

  public class Option { 
  public String[] getOptions() { 
  //实际上这些字串是从资料库中查到的啦… 
  return new String[] { "良葛格" , "毛美眉" , "米小狗" } ; 
  } 
  }

传回的字串阵列，您要填写到下拉选单中，当然，首先我们要在dwr.xml中开发这个物件…

  <?xml version= "1.0" encoding= "UTF-8" ?> 
  <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd" > 

  <dwr> 
  <allow> 
  <create creator= "new" javascript= "OPT" > 
  <param name= "class" value= "onlyfun.caterpillar.Option" /> 
  </create> 
  </allow> 
  </dwr>

这是我们的网页…

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > 
  <html> 
  <head> 
  <meta http-equiv= "Content-Type" content= "text/html; charset=BIG5" > 
  <script src= "option.js" type= "text/javascript" ></script> 
  <script src= "dwr/interface/OPT.js" type= "text/javascript" ></script> 
  <script src= "dwr/engine.js" type= "text/javascript" ></script> 
  <script src= "dwr/util.js" type= "text/javascript" ></script> 

  </head> 

  <body> 
 选项: <select id= "opts" ></select> 
  </body> 
  </html>

传回的字串阵列会填入opts这个select中，我们的option.js如下…

  window.onload = function() { 
  OPT.getOptions(populate); 
  } ; 

  function populate(list) { 
  DWRUtil.removeAllOptions( "opts" ); 
  DWRUtil.addOptions( "opts" , list); 
  }

够简单了…不需要解释了…

看一下结果…

好啦！我知道有人在说了，这个程式有够无聊… Dead

改一下！就是个不错的范例了，例如连动方块，唔！在Ajax in action中叫啥？ Dynamic double combo？ …

假设一个会去从资料库中查询资料的Java程式示意如下：

  package onlyfun.caterpillar; 

  import java.util.Map; 
  import java.util.TreeMap; 

  public class Bike { 
  private Map<String, String[]> bikes; 

  public Bike() { 
  bikes = new TreeMap<String, String[]>(); 
  bikes.put( "2000" , new String[] { "2000 T1" , "2000 T2" , "2000 T3" } ); 
  bikes.put( "2001" , new String[] { "2001 A1" , "2001 A2" } ); 
  bikes.put( "2002" , new String[] { "2002 BW1" , "2002 BW2" , "2002 BW" } ); 
  bikes.put( "2003" , new String[] { "2003 S320" } ); 
  bikes.put( "2004" , new String[] { "2004 TA1" , "2004 TA2" , "2004 TA3" } ); 
  } 

  public String[] getYears() { 
  String[] keys = new String[bikes.size()]; 
  int i = 0; 
  for (String key : bikes.keySet()) { 
  keys[i++] = key; 
  } 
  return keys; 
  } 

  public String[] getBikes(String year) { 
  return bikes.get(year); 
  } 
  }

getYears()跟getBkies()分别表示产品的年份跟型号，这边用Map模拟，实际上资料是来自资料库的查询。

一样的，在dwr.xml中设定：

  <?xml version= "1.0" encoding= "UTF-8" ?> 
  <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd" > 

  <dwr> 
  <allow> 
  <create creator= "new" javascript= "Bike" scope= "application" > 
  <param name= "class" value= "onlyfun.caterpillar.Bike" /> 
  </create> 
  </allow> 
  </dwr>

我们会有个脚踏车年份与型号查询页面：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > 
  <html> 
  <head> 
  <meta http-equiv= "Content-Type" content= "text/html; charset=BIG5" > 
  <title>Insert title here</title> 
  <script type= 'text/javascript' src= 'dwr/interface/Bike.js' ></script> 
  <script type= 'text/javascript' src= 'dwr/engine.js' ></script> 
  <script type= 'text/javascript' src= 'dwr/util.js' ></script> 
  <script type= 'text/javascript' src= 'bike.js' ></script> 
  </head> 
  <body οnlοad= "refreshYearList();" > 
 年份：<select id= "years" οnchange= "refreshBikeList();" ></select><br/><br/> 
 型号：<select id= "bikes" ></select><br/> 
  </body> 
  </html>

注意，在选完第一个年份后，会触发onchange事件，接着第二个下拉选单会自动填上对应年份的型号，而不是按钮按下，再去取得第二个下拉选单，然后refresh. ..blah...blah...

bike.js如下…

  function refreshYearList() { 
  Bike.getYears(populateYearList); 
  } 

  function populateYearList(list) { 
  DWRUtil.removeAllOptions( "years" ); 
  DWRUtil.addOptions( "years" , list); 
  refreshBikeList(); 
  } 

  function refreshBikeList() { 
  var year = $( "years" ).value; 
  Bike.getBikes(year, populateBikeList); 
  } 

  function populateBikeList(list) { 
  DWRUtil.removeAllOptions( "bikes" ); 
  DWRUtil.addOptions( "bikes" , list); 
  }

一样很简单…

看个无聊的画面…XD

hakunamatata2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DWR入门与应用（二）

假设您要从资料库中查询出一些字串，然后填写到表单的下拉选单中。例如一个示意的Java程式如下： 1 2 3 4 5 6 7 8 package onlyfun.caterpillar; public class Option { public String[] getOptions() { //实际上这些字串
复制链接

扫一扫

专栏目录