3

我正在尝试将 JQuery Full Calendar与 Spring MVC + Freemarker 一起使用。

我做了一个这样的演示。

目标：我需要调用控制器来获取包含要在日历上呈现的事件的 JSON 对象。

问题：我有以下 freemarker，它应该去控制器并获取 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 对象。

自由标记：

   $(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
    }

根据spring文档：@ResponseBody注解类似于@RequestBody。此注解可以放在方法上，并指示返回类型应直接写入 HTTP 响应正文（而不是放在模型中，或解释为视图名称）。

例如：

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

我不确定这是否不同于：

response.getWriter().write(json);

这篇文章讨论了差异，其中一个解决方案提到了与 freemarker 的冲突：Spring mvc has response.write to output to the browser directly？

还可以尝试在您的 ajax 调用中指定预期的数据类型：

$(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'
         }])
     };)
 };

正如建议的那样，我还将在调试模式下运行您的应用程序，在控制器中设置一个调试点，以查看代码是否被命中。如果不是用 firebug 分析您的请求中使用的 url。

检查 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 文件的区域。

我刚刚从您的评论中注意到的另一件事。你说萤火虫显示你试图点击这个网址：

:eventSources: [{ // 你的事件源 url: '/springway/vacation/getVacation', type: 'GET', data: { start: 'start', id: 'id', title: 'title,' }

我不喜欢格式化的方式，特别是它包含注释，这可能会使该行的其余部分变得毫无意义或在 url 中使用。我会使用 firebug 中的 net 面板来查看这个，它显示了通过网络传输的请求。这将向您显示您尝试点击的真实网址。

我还会在你的 js 中编辑这一行：

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

至：

url: '/vacation/getVacation',

我不熟悉@spring.url，但在我看来，它目前弊大于利。

于 2012-04-14T13:56:02.457 回答