SpringMVC JSON數據交互

時間 2020-02-02

標籤 springmvc json 數據交互欄目 Spring 简体版

原文原文鏈接

在SpringMVC中使用json，須要添加Jackson的3個jar包：html

jackson-core.jar jackson的核心包
jackson-datebind.jar jackson數據綁定須要的包
jackson-annotations.jar 使用jackson註解須要的包

Jackson jar包的下載

使用maven是最簡單的，jar包只能到maven倉庫下載：前端

https://mvnrepository.com/search?q=jacksonjava

前三個分別對應Jackson的3個jar包，須要分別下載。jquery

使用流程

以根據學號查詢學生信息爲例。git

（1）添加jackson的3個jar包

（2）在web下新建文件夾js，把jquery.min.js放進去

（注意是web文件夾下，不是WEB-INF下）github

（2）com.chy.model.Student

@Component
@Scope("prototype")
public class Student {
    private int id;
    private String name;
    private int age;
    private float score;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public float getScore() {
        return score;
    }

    public void setScore(float score) {
        this.score = score;
    }
}

每一個學生都不相同，設計爲多例。web

這個bean做爲數據傳輸對象，持久層（dao）用Student對象來封裝查詢結果，傳回給業務層（controller），業務層將Student對象做爲響應傳給視圖層。ajax

（4）前端使用ajax發起請求

  <body>

  <form>
    <%--使用的是jq的id選擇器$("#xx")，因此只能用id，不能用name--%>
    學號：<input type="text" id="id"><br />
    <button type="button" id="btn">查詢學生信息</button>
  </form>
  <p id="show"></p>
  
  <%-- 開頭不能加/，但能夠加 ${pageContext.request.contextPath}/ --%>
  <%-- <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script> --%>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script>
    $("#btn").click(function () {
      $.ajax({
        //開頭不能加/，但能夠加 ${pageContext.request.contextPath}/
        url:"studentController/queryStudent",
        type:"post",
        // 傳給後臺的數據類型、使用的字符集。能夠缺省，由於data:{},看到{}就會自動做爲json處理
        // contentType:"application/json;charset=utf-8",
        //傳給後臺的數據，json形式，key是String類型，value能夠是多種類型，鍵值對之間逗號分隔
        data:{"id":$("#id").val()},
        //期待的返回值類型（回調函數的參數類型）
        dataType:"json",
        error:function () {
          console.log("ajax請求數據失敗！");
        },
        success: function (data) {
          //瀏覽器把接受到的json數據做爲js對象，可經過.調用屬性
          var info = "姓名：" + data.name + ",年齡：" + data.age + "，成績：" + data.score;
          $("#show").text(info);
        }
      })
    });
  </script>

  </body>

若是要請求純文本（字符串），將dateType的值改成text。spring

（4）後臺使用controller處理ajax請求

@org.springframework.stereotype.Controller
@RequestMapping("studentController")
public class StudentController{
    private Student student;

    @Autowired
    public void setStudent(Student student) {
        this.student = student;
    }

    @RequestMapping("/queryStudent")
    @ResponseBody
    public Student queryStudent(int id) {
        System.out.println(id);
        //此處省略鏈接數據庫查詢
        student.setName("chy");
        student.setAge(20);
        student.setScore(100);
        return student;
    }

}

能夠用簡單數據類型接收前端傳來的數據，也可使用Bean來接收（會賦給同名的屬性）。數據庫

不少教程說要在業務方法的參數前面加@RequestBody，才能將ajax傳來的數據轉換爲須要的類型；

事實上，隨着版本更替，高版本SpringMC內建的轉換器已經能夠將ajax傳來的數據轉換須要的類型，加@RequestBody反而會出錯。

須要在業務方法上添加註解@ResponseBody，此處解會自動將返回值添加到響應體中，來響應ajax請求。

無論請求的是text、仍是json，都須要使用@ResponseBody。

若是請求的是text，將返回值類型寫成String；

若是請求的是json，返回值能夠寫成bean（返回json對象，好比請求一個學生的信息），也能夠寫成List（返回json數組，好比請求多個學生的信息）。

（5）springmvc的配置

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

    <!--配置包掃描-->
    <context:component-scan base-package="com.chy.controller,com.chy.model" />

    <!--註解驅動，會自動使用jackson的json轉換器，並自動註冊HandlerMapping、HandlerAdapter，因此咱們沒必要再配置HandlerMapping、HandlerAdapter-->
    <mvc:annotation-driven />

    <!--配置資源映射，配置過的文件會被DispatcherServlet放行（不交給controller處理）-->
    <mvc:resources mapping="/js/" location="/js/" />

    <!--配置視圖解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--前綴-->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!--後綴-->
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

踩過的坑

一看到這種以mvc開頭的元素：

<mvc:annotation-driven />

<mvc:resources mapping="/js/" location="/js/" />

就知道IDEA又要導錯約束：

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

將cache改成mvc，xsi中對應的2處也要改。

json轉換器的2種配置方式

咱們在controller中使用了@ResponseBody、@RequestBody2個註解來進行json——java類型之間的轉換，這2個註解須要jackson提供的類型轉換器的支持。

配置方式一：

    <!--配置HandlerMapping-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" />

    <!--配置HandlerAdapter-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <!--使用list注入要使用的messageConverters-->
        <property name="messageConverters">
            <list>
                <!--Jackson的json轉換器-->
                <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
            </list>
        </property>
    </bean>