3

Spring MVC + Freemarker とともにJQuery Full Calendarを使用しようとしています。

そんなデモを作りました。

ターゲット: コントローラーを呼び出して、カレンダーに表示するイベントを含む JSON オブジェクトを取得する必要があります。

問題: コントローラーに移動して JSON オブジェクトをレンダリングする必要がある次のフリーマーカーがありますが、移動しませんか?!!

フリーマーカー:

[#ftl /]

<script type="text/javascript">
    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Event Title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                            true // make the event "stick"
                            );
                }
                calendar.fullCalendar('unselect');
            },
            editable: true,
            events: [
                {
                    url: '[@spring.url '/vacation/getVacation'/]',
                    type: 'GET',

                    data: {
                        start: 'start',
                        id: 'id',
                        title: 'title'
                    }

                }
            ]
        });

    });


body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
    width: 900px;
    margin: 0 auto;
}

コントローラー:

@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    public @ResponseBody   void getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2011-07-28");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);


        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        try {
            response.getWriter().write(json);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

ファイアーバグ ショット : ここに画像の説明を入力

4

2 に答える 2

3

最後に、私はそれを機能させます:)私は$.getJSONを使用してjsonオブジェクトをフェッチしました。

FreeMarker：

   $(document).ready(function() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
          $.getJSON('[@spring.url '/vacation/getVacation'/]', function (data) {
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                    if (title) {
                        calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                                true // make the event "stick"
                                );
                    }
                    calendar.fullCalendar('unselect');
                },
                editable: true,
                events:[data]
            });
         });
        });

Javaコントローラー：

@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    public
    @ResponseBody
    String getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2012-4-15");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);

        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        return json;
    }
于 2012-04-14T21:34:00.873 に答える
0 
@RequestMapping(value = "/vacation/getVacation", method = RequestMethod.GET)
    @ResponseBody
    public String getVacation(HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("id", 111);
        map.put("title", "event1");
        map.put("start", "2011-07-28");
        map.put("url", "http://yahoo.com/");

        // Convert to JSON string.
        String json = new Gson().toJson(map);


        // Write JSON string.
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        return json; //Try simply returning the json
    }

春のドキュメントによると: @ResponseBody アノテーションは @RequestBody に似ています。この注釈はメソッドに付けることができ、戻り値の型を HTTP 応答本文に直接書き込む必要があることを示します (モデルに配置したり、ビュー名として解釈したりしないでください)。

例えば：

@RequestMapping(value = "/something", method = RequestMethod.PUT)
@ResponseBody
public String helloWorld()  {
  return "Hello World";
}

これが次のものと異なるかどうかはわかりません。

response.getWriter().write(json);

この投稿では違いについて説明し、解決策の 1 つは freemarker との競合について言及しています: Does spring mvc has response.write to output to the browser directly?

また、ajax 呼び出しで期待される dataType を指定してみてください。

$(document).ready(function () {
     var calendar = $('#calendar').fullCalendar({
         editable: true,
         eventSources: [{
         // your event source
             url: '[@spring.url '/vacation/getVacation'/]', // I was expecting here to call the controller,but nothing is happened !!
             type: 'GET',
             data: {
                 start: 'start',
                 id: 'id',
                 title: 'title,'
             },
             error: function () {
                 alert('there was an error while fetching events!');
             },
             color: 'yellow',
             textColor: 'black',
             dataType: 'json'
         }])
     };)
 };

提案されているように、コードがヒットしているかどうかを確認するために、コントローラにデバッグ ポイントを設定してデバッグ モードでアプリケーションを実行することもできます。そうでない場合は、リクエストで使用されている URL を firebug で分析します。

spring がディスパッチャーのセットアップに使用する構成ファイルを確認します。通常、InternalResourceViewResolver はこの構成内に登録されます。これが私の例です：

<!-- 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>

この構成が見つかった場合は、それが jsp ファイルを保存している領域を指していることを確認してください。

あなたのコメントから私が気づくもう一つのこと。あなたは、firebug がこの URL にアクセスしようとしていることを示したと言いました:

:eventSources: [{ // イベント ソース url: '/springway/vacation/getVacation', type: 'GET', data: { start: 'start', id: 'id', title: 'title,' }

特にコメントが含まれているため、その行の残りの部分が無意味になったり、URL で使用されたりする可能性があります。これは、firebug のネット パネルを使用して確認できます。これは、要求がネットワークを通過していることを示しています。これにより、ヒットしようとしている実際の URL が表示されます。

また、js で次の行を編集します。

url: '[@spring.url '/vacation/getVacation'/]',

に：

url: '/vacation/getVacation',

私は @spring.url に慣れていませんが、現時点では良いことよりも悪いことをしているように見えます。

于 2012-04-14T13:56:02.457 に答える