3

私はいくつかのチャートを生成するためにGoogle Visualization APIを使用しているSpring MVC Webアプリケーションに取り組んでいます。グラフを描画する関数に送信するデータを表す 2 つの配列リストを含むモデル クラスがあります (これは JSON に変換したいものです)。

モデルクラス:

@Component
public class JsonResponse {

private List<Integer> percentages = new ArrayList<Integer>();
private List<String> topics = new ArrayList<String>();

public JsonResponse(){
}

public List<Integer> getPercentages() {
    return percentages;
}

public void setPercentages(List<Integer> percentages) {
    this.percentages = percentages;
}

public List<String> getTopics() {
    return topics;
}

public void setTopics(List<String> topics) {
    this.topics = topics;
}
}

次にve got a、2 つの arraylists 属性が設定された (上で記述したクラスの) モデル オブジェクトを返すメソッドを含むクラスに @Component` アノテーションを付けました。

@Component
public class ChartUtils {
    @Autowired
    public JsonResponse response;

    public JsonResponse listPieChartData( ModelAndView model ,int waveId ){

    //arraylists for chart generation
List<Integer> percentages = new ArrayList<Integer>();
List<String> topics = new ArrayList<String>();

    {... code for accessing the DB and processing some data and then populating the 2                  
     arraylists ... }

response.setTopics(topics);
response.setPercentages(percentages);

return response;}
}

したがって、コントローラークラスは、チャート生成用のデータを収集するために呼び出しているアクションのマッピングを持ち、上記のクラスからメソッドを呼び出しており、注釈listPieChartDataも使用しているクラスです。@ResponseBody:

@Controller
public class ChartController {

@Autowired
public ChartUtils utils;

@Autowired
public JsonResponse response;

@RequestMapping(value = "/drawPieChart", method = RequestMethod.GET )
@ResponseBody
public JsonResponse drawPieChart( ModelAndView model,
        @RequestParam(value = "id", defaultValue = "-1") int waveId ) {

    return utils.listPieChartData(model,waveId ); }

グラフを描画する JavaScript 関数:

function drawColumnChart(percentages, topics , div,width,height) {
    var data = new google.visualization.DataTable();

data.addColumn('string', 'Wave');
for (var i=0; i < topics.length; i++){
    data.addColumn( 'number', topics[i] ); 
}

    data.addRow( percentages );

    var wave=percentages[0];
    var options = {
        'title':'Generated Chart For '+wave,
        'backgroundColor': { fill: "none" },
        'is3D': true,
        'width':width,
        'height':height,
    };

var chart = new google.visualization.ColumnChart(document.getElementById(div));
chart.draw(data, options);

}

そして、コントローラーのマップされたメソッド（データを収集するため）へのAJAX呼び出しは、最終的に上記のJS関数を呼び出してチャートを取得します（コントローラーメソッドのリクエストパラメーターint idも送信していますが、私はそれを書いていません）

$("#button").live("click", function(){

var arrayP, arrayT;
$.ajax({
    url: "drawPieChart",      
contentType: "application/json",
data: params,
success: function(data) {
    $.each(data, function(messageIndex, message) {
    if (messageIndex === 0) {
            arrayP = message;
    } else {
    arrayT = message;
    }
        });
    drawPieChart(arrayP, arrayT,'chart_div',600,400);
    }
    });  
});

私はこれがたくさんのコードであることを知っています:)しかし、フローをよりよく理解するために、それは非常に単純なコードです.これがどのように機能するかです:

私が呼び出しているボタン入力から、AJAX を使用して、マップされたメソッドを drawPieChart アクション (クラス内にあります)ChartControllerに渡します。このメソッドは、(クラスから) listPieChart メソッドを呼び出して応答を送信し、オブジェクトChartUtilsを返します( JsonResponse2 つの配列リストが含まれています)。これJsonResponseは JSON に変換する必要があります。AJAX 要求では、要求に JSON 入力が必要であることを伝えているため (contentType: "application/json" を介して)、@ResponseBodyマップされたコントローラー メソッドで使用するため、それを取得する必要があります。このリクエスト。

私はこの応答を得ています：

このリクエストによって識別されるリソースは、リクエストの「accept」ヘッダー () に従って、受け入れられない特性を持つ応答を生成することしかできません。
(HTTP ステータス 406)

私が間違っているところを修正してください。これを機能させることができず、理由がわかりません...

そして私のservlet-context.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/mvc       
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/beans    
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context     
http://www.springframework.org/schema/context/spring-context-3.0.xsd">

  <!-- DispatcherServlet Context: defines this servlet's request-processing      
infrastructure -->

  <!-- Enables the Spring MVC @Controller programming model -->
  <annotation-driven />

  <!-- Handles HTTP GET requests for /resources/** by efficiently serving up
      static resources in the ${webappRoot}/resources directory -->
  <resources mapping="/resources/**" location="/resources/" />

  <!-- Resolves views selected for rendering by @Controllers to .jsp resources
    in the /WEB-INF/views directory -->
  <beans:bean 
     class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="prefix" value="/WEB-INF/views/" />
    <beans:property name="suffix" value=".jsp" />
  </beans:bean>

  <context:component-scan base-package="com.bla.bla" />

  <beans:import resource="classpath:springJDBC.xml" />

</beans:beans>
4

2 に答える 2

4

問題は、pom.xml で宣言された Jackson の依存関係をすべて持っていなかったことです。メソッドからの応答として @ResponseBody アノテーションを使用して、Spring 3 でオブジェクトを自動的にシリアライズする場合の Maven プロジェクトの依存関係は次のとおりです。Noob のものですが、私が見つけた例でこれが言及されているのを見ませんでした。

  <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-jaxrs</artifactId>
        <version>1.6.1</version>
    </dependency>

        <dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.9</version>
</dependency>

<dependency>
       <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-core-asl</artifactId>
    <version>1.9.9</version>
</dependency>

また、チャート生成用のデータでjsonオブジェクトを返すメソッドを呼び出すために、ajax呼び出しでいくつかのものを変更する必要がありました。

$("#buttonPieGenerate").live("click", function(){

    $.ajax({
        url: "drawPieChart", //method from controller
        contentType: "application/json",
        data: params,
        success: function(data) {

        drawPieChart(data.percentages, data.topics,'chart_div',600,400);
        }
    });

});

data.percentages 、 data.topics の呼び出しからの応答として取得している Json オブジェクトのデータにアクセスしています。

于 2012-09-20T19:17:53.933 に答える
3

2015 年の世界の小さな更新:

<dependency>
    <!-- Just placing this on the classpath will enable JSON for @ResponseBody -->
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.3</version>
</dependency>
于 2015-06-15T16:14:24.263 に答える