• SpringMVC_5_实操JSON


    previous:SpringMVC_4_实操FileUpload next:

    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格式

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

        <!-- 配置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协同

    讲解的知识点:

  • 相关阅读:
    NOIP2016-2020 复盘
    「笔记」线段树合并/分裂
    「笔记」线性基
    20210628模拟赛解题报告
    「笔记」左偏树
    题解 CF718C Sasha and Array
    一些杂碎的知识点
    20210614 模拟赛
    洛谷 P4249 [WC2007]剪刀石头布
    CF132E Bits of merry old England
  • 原文地址:https://www.cnblogs.com/charles999/p/6755696.html
Copyright © 2020-2023  润新知