在上一篇博客 SpringMVC框架之前後端數據交互(附Demo)演示了在SpringMVC
框架中如何進行前後端的數據交互,在本篇博客將介紹SpringMVC
框架中如何以Json
格式的數據進行前後端的交互。
關於項目創建,直接下載前一篇博客的Demo源碼 SpringMVC框架之前後端數據交互(附Demo),這裏不再複述了。
由於需要使用Ajax、處理Json格式數據,請先導入jQuery、Jackson依賴。
我這裏導入的是舊版,你可以去它官網下載最新版https://jquery.com/download/
導入Jackson相關的依賴到項目
下載地址:https://www.jb51.net/softs/570453.html
這裏我也沒試有沒有多餘的包,你可以嘗試精簡導入。
修改DispatcherServlet-servlet.xml
文件,添加jackson轉換器。
<!-- 3.配置註解處理適配器來執行控制器的方法 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
</property>
</bean>
1、前端發送json格式數據給後端
新建Student
實體類
package cn.hestyle.demo.entity;
/**
* description: Student實體類(簡化)
*
* @author hestyle
* @version 1.0
* @className SpringMVC_demo_01->Student
* @date 2020-01-28 21:36
**/
public class Student {
/**學號*/
private String studentNo;
/**密碼*/
private String password;
/**
* jackson需要無參構造方法,所以手動提供一個
*/
public Student() {
}
public String getStudentNo() {
return studentNo;
}
public void setStudentNo(String studentNo) {
this.studentNo = studentNo;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "Student{" +
"studentNo='" + studentNo + '\'' +
", password='" + password + '\'' +
'}';
}
}
新建StudentController控制器,添加register方法。
package cn.hestyle.demo.web.controller;
import cn.hestyle.demo.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* description: Student控制器
*
* @author hestyle
* @version 1.0
* @className SpringMVC_demo_01->StudentController
* @date 2020-01-28 19:02
**/
@Controller
@RequestMapping("student")
public class StudentController {
@RequestMapping("toRegister.do")
public String toRegister() {
//跳轉到view/student/register.jsp頁面
return "/student/register";
}
@RequestMapping("register.do")
public String register(@RequestBody Student student) {
//使用@RequestBody註解,前端提交的json格式的字符串會自動被轉換爲student對象
System.err.println(student);
//不跳轉任何界面
return null;
}
}
添加student/register.jsp
<%--
Created by IntelliJ IDEA.
User: hestyle
Date: 2020/1/28
Time: 21:22
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Student註冊</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script>
function register() {
//使用選擇器,獲取表單裏的參數
var studentNo = $("input[name='studentNo']").val();
var password = $("input[name='password']").val();
//封裝成json格式
var jsonObj = {studentNo:studentNo, password:password};
//轉換成字符串(不能直接發送json對象!!!)
var dataStr = JSON.stringify(jsonObj);
//使用ajax.post方式,以application/json格式發送數據給後端
$.ajax({
url:'${pageContext.request.contextPath}/student/register.do',
type : 'POST',
data : dataStr,
contentType : 'application/json;charset=utf-8',
success : function (respData) {
//當請求響應成功,控制檯輸出放回的數據respData
console.info(respData);
}
});
}
</script>
</head>
<body>
<form id="studentForm">
學號:<input type="text" name="studentNo"><br>
密碼:<input type="text" name="password"><br>
<input type="button" value="註冊" onclick="register();">
</form>
</body>
</html>
瀏覽器訪問student/toRegister.do
路徑
控制檯輸出信息:
2、後臺給前端返回json格式數據
修改studnetController.register方法,在返回值前添加@ResponseBody
註解
@RequestMapping("register.do")
public @ResponseBody Student register(@RequestBody Student student) {
//使用@RequestBody註解,前端提交的json格式的字符串會自動被轉換爲student對象
System.err.println(student);
//方法返回值使用了@ResponseBody註解,jackson轉換器會將返回的對象轉爲json字符串返回前端(並不是返回頁面了!)
return student;
}
重新部署項目後,再次訪問student/toRegister.do
使用註解@RequestBody
需要注意的地方是,前端必須以post方式,json格式提交json格式的字符串數據,並且json字符串中的各屬性名與需要與封裝的實體類屬性一一對應!
使用註解@ResponseBody
貌似沒啥注意點,直接加在方法返回值前就行。
Demo源碼下載地址:
地址一:https://pan.baidu.com/s/1mIAZ-duPg-is3i48hWzUwA 提取碼: qddp
地址二:https://pan.baidu.com/s/1488OeA8Y9rlKGsH-9sdhlQ 提取碼: xs1k
地址三:https://pan.baidu.com/s/1VYSyXTCAmBPvxx8IypdB6A 提取碼: p7j9
以上就是SpringMVC框架之處理json格式數據主要內容。