SpringMVC_5_实操JSON

4-7 JSON

work with JSON

JSON(JavaScript Object Notation) is a lightweight date interchange foramt.

.Restful Web Service

{ key1:value1

, key2:value2

, ... }

HTML-DATA-Apps{JSON},HTML和JSON是数据模型的不同表现形式。
SpringMVC ：ContentNegotiatingViewResolver来处理不同的数据呈现格式。
JSPView 人类
JsonView机器
------------------------------------------------

SpringMVC JSON的配置：

mvc-dispatcher-servlet.xml中加入如下代码；

配置defaultView，MappingJackson2JsonView把模型数据转换为JSON格式

    <!-- 配置ViewResolver。 可以用多个ViewResolver。 使用order属性排序。 InternalResourceViewResolver放在最后。 -->
    <bean
        class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="order" value="1" />
        <property name="mediaTypes">
            <map>
                <entry key="json" value="application/json" />
                <entry key="xml" value="application/xml" />
                <entry key="htm" value="text/html" />
            </map>
        </property>

        <property name="defaultViews">
            <list>
                <!-- JSON View -->
                <bean
                    class="org.springframework.web.servlet.view.json.MappingJackson2JsonView">
                </bean>
            </list>
        </property>
        <property name="ignoreAcceptHeader" value="true" />
    </bean>

    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass"
            value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/WEB-INF/jsps/" />
        <property name="suffix" value=".jsp" />
    </bean>

pom.xml引用

    <properties>
        <commons-lang.version>2.6</commons-lang.version>
        <slf4j.version>1.7.6</slf4j.version>
        <spring.version>4.1.3.RELEASE</spring.version>
        <jackson.version>2.5.4</jackson.version>
    </properties>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.version}</version>
        </dependency>

3. controller

3.1 最简单方法@ResponseBody Course

@RequestMapping(value="/{courseId}",method=RequestMethod.GET)
public @ResponseBody Course getCourseInJson(@PathVariable Integer courseId){
return courseService.getCoursebyId(courseId);
}

3.2 ResponseEntity<Course>：ResponseEntity为SpringMVC为我们抽象的实体，使用泛型方式包裹了类

@PathVariable关联查询参数和方法参数
@RequestMapping(value="/jsontype/{courseId}",method=RequestMethod.GET)

此时就不需要引入@ResponseBody了。

return new ResponseEntity<Course>(course, HttpStatus.OK);构造方式为实际的模型数据和一个Http的状态

public ResponseEntity<Course> getCourseInJson2(@PathVariable Integer courseId){
Course course = courseService.getCoursebyId(courseId);
return new ResponseEntity<Course>(course, HttpStatus.OK);
}

-------------------------------------------------------

JSP通过JQUERY把JSON数据加载到页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我不是真正的慕课网</title>

<link rel="stylesheet"
    href="<%=request.getContextPath()%>/resources/css/main.css"
    type="text/css" />
<script type="text/javascript"
    src="<%=request.getContextPath()%>/resources/js/jquery-1.11.3.min.js"></script>

</head>
<script>
jQuery(function($){
    var urlStr = "<%=request.getContextPath()%>/courses/<%=request.getParameter("courseId")%>";
    //alert("Before Call:"+urlStr);
    $.ajax({
        method: "GET",
        url: urlStr,
        success:function(data,status,jqXHR){
            //alert("Success:"+data);
            var course = data;
            var path = "<%=request.getContextPath()%>/";    
            $(".course-title").html(course.title);
            $(".course_video").attr("src", path+course.imgPath);
            $("#learningNum").text(course.learningNum);
            $("#duration").text(course.duration);
            $("#levelDesc").text(course.levelDesc);
            $(".course_shortdecription").html(course.descr);
            
            var chapterList = course.chapterList;
            var chapter;
            
            for(var i = 0;i<chapterList.length;i++){
                chapter = chapterList[i];    
                
                var liObj = $("li",$("#chapterTemplate")).clone();                 
                $(".outline_name", liObj).text(chapter.title);
                $(".outline_descr", liObj).text(chapter.descr);                
                liObj.appendTo("#couList");                
            }// ~ end for            
        }
    }); // end ajax
});
</script>
<body>


    <div id="main">

        <div class="newcontainer" id="course_intro">
            <div class="course-title"></div>
            <div class="course_info">
                <div class="course-embed l">
                    <div id="js-course-img" class="img-wrap">
                        <img width="600" height="340" alt=""
                            class="course_video" />
                    </div>
                    <div id="js-video-wrap" class="video" style="display: none">
                        <div class="video_box" id="js-video"></div>
                    </div>
                </div>
                <div class="course_state">
                    <ul>
                        <li><span>学习人数</span> <em id="learningNum"></em></li>
                        <li class="course_hour"><span>课程时长</span> <em
                            class="ft-adjust"><span id="duration"></span>秒</em></li>
                        <li><span>课程难度</span> <em id="levelDesc"></em></li>
                    </ul>
                </div>

            </div>
            <div class="course_list">
                <div class="outline">
                    <h3 class="chapter_introduces">课程介绍</h3>
                    <div class="course_shortdecription"></div>

                    <h3 class="chapter_catalog">课程提纲</h3>
                    <ul id="couList">
                        
                    </ul>
                </div>

            </div>
        </div>

    </div>

    <div id="chapterTemplate"  style="display:none">
       <li class="clearfix open"><a href="#">
                <div class="openicon"></div>
                <div class="outline_list l">
                        <h5 class="outline_name"></h5>
                        <p class="outline_descr"></p>
                </div>
         </a></li>
    </div>

</body>
</html>

--------------------------------------------------------

总结：SpringMVC同JSON协同工作的内容

SpringMVC ：ContentNegotiatingViewResolver来将不同的数据呈现请求转化成不同的View。把相同格式的数据分发到不同的呈现请求

ResponseEntity 通过泛型类，处理返回结果，将返回的数据模型包裹在这个类之中就可以把模型数据转换为JSON格式

更简便的方式@ResponseBody/@RequestBody方式

==5 Summary======================================

宏观：MVC的核心思想

Structure：

Details：

　　Conroller编写

　　数据绑定

　　文件上传

　　JSON协同

讲解的知识点：