WebWork2.2.1でJSON!?

年月を選択した場合に、結果を取得しtableで表示する例

• で必要なjsをincludeする

<form id="unitPriceForm">
<script type='text/javascript' src='/コンテキスト/dwr/engine.js'> </script>
<script type='text/javascript' src='/コンテキスト/dwr/util.js'> </script>
<script>
function employeeUnitPriceDiv() {
  // jsonの結果から値を取得する部分
  var funcs = [
    function(row) { return row.name; },
    function(row) { return row.unitPrice; }
  ];
  // 年月が選ばれた場合に呼ばれる関数
  this.employeeUnitPriceSearch = function() {
    var bindArgs = {
      // URLを指定
      url: "/puma/employeeUnitPriceSearch!search?yearMonth=" + DWRUtil.getValue('year') + DWRUtil.getValue('month'),
      // jsonを指定
      mimetype: "text/json",
      // 結果が返ってきたときに呼ばれるメソッド
      load: function(type, json, http) {
        // <tbody id="row"></tbody>のデータを削除
        DWRUtil.removeAllRows('row');
        // 取得したデータを<tbody id="row"></tbody>内に設定
        // 引数: tbodyのid, jsonのデータ, jsonのデータを取得するメソッド
        DWRUtil.addRows('row', json['rows'], funcs);
      }
    };
    var canBind = dojo.io.bind(bindArgs);
  }
}
var employeeUnitPrice = new employeeUnitPriceDiv();
// employeeUnitPriceSearchTopicがpublishされたと時に呼ばれる関数を指定!?
dojo.event.topic.getTopic("employeeUnitPriceSearchTopic").subscribe(employeeUnitPrice, "employeeUnitPriceSearch");
</script>
<table class="input-layout">
  <tr>
    <th>年月</th>
    <td>
      // onchange部分によぶtopicを指定
      <select id="year" name="year" tabindex="1" onchange="javascript: dojo.event.topic.publish('employeeUnitPriceSearchTopic');">
        <option value="2005">2005</option>
        <option value="2006" selected="selected">2006</option>
      </select>
      <select id="month" name="month" tabindex="2" onchange="javascript: dojo.event.topic.publish('employeeUnitPriceSearchTopic');"/>
        <option value="01">01</option>
        <option value="02">02</option>
      </select>
    </td>
  </tr>
</table>

<table id="unitPriceTable">
  <thead>
  <tr>
    <th>氏名</th>
    <th>単価</th>
  </tr>
  </thead>
  <tbody id="row">
  </tbody>
</table>

</form>

こんな感じでできた！