SAStruts(Super Agile Struts)あれこれ

AjaxでJSONデータを取得しましょう

履歴

序

SAStruts＋Ajax＋jQueryを試してみましょう。

ここでは、jQueryのAjax機能を使用してアクションクラスを呼び出し、レスポンスとして返されるJSON形式の部署情報を表示しましょう。

ここでは、例を単純にするためにアクションフォームを使用しません。

改

１．JSONIC(JSONエンコーダー/デコーダーライブラリ)を配置

Entityインスタンス→JSON形式への変換にはJSONICを使用します。

JSONICからダウンロードした"jsonic-1.0.2.jar"を sa-struts-tutorial\src\main\webapp\WEB-INF\libフォルダにコピーします。
ライブラリのバージョンは適宜読み替えて下さい。

[プロジェクト] -> [プロパティ]でプロパティウインドウを開きます↓

↑の[Javaのビルド・パス]を選択して[JARの追加]ボタンをクリックします。

"jsonic-1.0.2.jar"を選択して[OK]ボタンをクリックすればOKです。

アクションクラス

"sa-struts-tutorial\src\main\java\tutorial\action\AjaxAction.java"を以下のように変更します。

package tutorial.action;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import org.seasar.struts.annotation.Execute;
import org.seasar.struts.util.ResponseUtil;
import tutorial.entity.Department;
import tutorial.service.DepartmentService;
import net.arnx.jsonic.JSON;
 
public class AjaxAction {
    
    @Resource
    protected DepartmentService departmentService;
    
    public List<Department> deptItems;
    
    @Execute(validator = false)
    public String index() {
        return "index.jsp";
    }
    
    @Execute(validator = false)
    public String load_json() throws IOException {
        
        //データベースから部署データを全件取得します。
        deptItems = departmentService.findAll();
        
        HttpServletResponse httpServletResponse = ResponseUtil.getResponse();
        httpServletResponse.setContentType("application/json");
        PrintWriter sendPoint = new PrintWriter(httpServletResponse.getOutputStream());
        
        //Entity→JSON形式に変換して出力します。
        sendPoint.println(JSON.encode(deptItems));
        sendPoint.flush();
        sendPoint.close();
        return null;
    }
}

※補足

String json = JSON.encode(deptItems);

によって、Entityのリストは以下のようなJSON形式データに変換されます。

[{"employeeList":null,"id":1,"name":"ACCOUNTING","version":1},
 {"employeeList":null,"id":2,"name":"RESEARCH","version":1},
 {"employeeList":null,"id":3,"name":"SALES","version":1},
 {"employeeList":null,"id":4,"name":"OPERATIONS","version":1}]

JSP

"sa-struts-tutorial\webapp\WEB-INF\view\ajax\index.jsp"を以下の内容に変更します。

<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>Tutorial: Ajax</title>
<link rel="stylesheet" type="text/css" href="${f:url('/css/sa.css')}" />
<script src="${f:url('/js/jquery.js')}"></script>
</head>
<body>
 
<h1>Tutorial: Ajax</h1>
 
<script type="text/javascript">
function loadJSON() {
  $.ajax({  
    url: '${f:url('/ajax/load_json')}',  
    type: 'GET', 
    dataType: 'json',  
    cache: false, //ブラウザにキャッシュさせません。
    error: function(){  
        alert("jsonファイルの読み込みに失敗しました");  
    },  
    success: function(json){  
        $("#response").html("部署数：" + json.length + "<br/>")
        for( var i=0; i<json.length; i++ ) {
            $("#response").append("部署名：" + json[i].name + "<br/>").html()
        }
    }  
  });  
}
</script>
 
<input type="button" value="部署情報取得" onclick="loadJSON()"/>
<div id="response"></div>
</body>
</html>