Top > SAStrutsあれこれ > AjaxでJSONデータを取得しましょう

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 
 
 
 
 
 
 
 
 
 
 
 
 
-
|
|
|
|
|
|
|
-
|
!
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
|
!
!
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;
    }
}
Everything is expanded.Everything is shortened.
  1
 
String json = JSON.encode(deptItems);
Everything is expanded.Everything is shortened.
  1
  2
  3
  4
 
 
 
 
[{"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}]
Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 
 
 
 
 
 
 
 
 
 
 
 
-
-
|
|
|
|
-
|
!
-
|
-
|
!
!
!
!
 
 
 
 
 
 
<%@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>   


添付ファイル: fileajax_json_5.jpg 930件 [詳細] fileajax_json_4.jpg 948件 [詳細] fileajax_json_3.jpg 892件 [詳細] fileajax_json_2.jpg 1073件 [詳細] fileajax_json_1.jpg 1149件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:25:55 (2928d)