當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

SpringBoot处理JSON数据

發布時間：2025/3/19 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 SpringBoot处理JSON数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

SpringBoot內置了JSON解析功能，默認使用Jackson來自動完成

當Controller返回的是一個Java對象或者是List集合時，SpringBoot自動將其轉換成JSON數據

一、新建項目

????? 1.創建一個Maven項目，命名為SpringBoot_jsontest,按照Maven項目的規范，src/main下新建一個resources的文件夾，再在此文件夾下新建static以及template兩個文件夾。

?????? 2.修改pom.xml文件

? <groupId>org.fkit</groupId>
? <artifactId>jsontest</artifactId>
? <version>0.0.1-SNAPSHOT</version>
? <packaging>jar</packaging>

? <name>jsontest</name>
? <url>http://maven.apache.org</url>

? 
? <parent>
??<groupId>org.springframework.boot</groupId>
??<artifactId>spring-boot-starter-parent</artifactId>
??<version>2.0.0.RELEASE</version>
??<relativePath/>
?</parent>
?
?? <properties>
??<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
??<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
??<java.version>1.8</java.version>
?</properties>

? <dependencies>
?
? ?
? ?<dependency>
??<groupId>org.springframework.boot</groupId>
??<artifactId>spring-boot-starter-web</artifactId>
?</dependency>
?
? ?
? ?<dependency>
??<groupId>org.springframework.boot</groupId>
??<artifactId>spring-boot-starter-thymeleaf</artifactId>
?</dependency>
?
??? <dependency>
????? <groupId>junit</groupId>
????? <artifactId>junit</artifactId>
????? <scope>test</scope>
??? </dependency>
? </dependencies>
</project>

3.引入靜態文件

二、創建實體類

Dog.java:

package com.ysh.jsontest.domain;

import java.io.Serializable;

public class Dog implements Serializable {
?private Integer id;
?private String name;
?private String image;
?private Double price;
?private String owner;
?
?public Dog() {
??
??// TODO Auto-generated constructor stub
?}
?public Dog(Integer id, String name, String image, Double price, String owner) {
??
??this.id = id;
??this.name = name;
??this.image = image;
??this.price = price;
??this.owner = owner;
?}
?public Integer getId() {
??return id;
?}
?public void setId(Integer id) {
??this.id = id;
?}
?public String getName() {
??return name;
?}
?public void setName(String name) {
??this.name = name;
?}
?public String getImage() {
??return image;
?}
?public void setImage(String image) {
??this.image = image;
?}
?public Double getPrice() {
??return price;
?}
?public void setPrice(Double price) {
??this.price = price;
?}
?public String getOwner() {
??return owner;
?}
?public void setOwner(String owner) {
??this.owner = owner;
?}
?

}

三、創建index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Spring Boot自動轉換JSON數據</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript">
$(document).ready(function(){
?findDog();
});
function findDog(){
?$.ajax("/findDog",// 發送請求的URL字符串。
???{
???dataType : "json", // 預期服務器返回的數據類型。
?? ???type : "post", //? 請求方式 POST或GET
???? contentType:"application/json", //? 發送信息至服務器時的內容編碼類型
???? // 發送到服務器的數據。該函數的作用是：系列化對象 ,系列化對象說白了就是把對象的類型轉換為字符串類型
???? data:JSON.stringify({id : 1, name : "巴扎黑"}),
???? async:? true , // 默認設置下，所有請求均為異步請求。如果設置為false，則發送同步請求
???? // 請求成功后的回調函數。
???? success :function(data){
????? console.log(data);
???? $("#image").attr("src","images/"+data.image+"");
???? $("#name").html(data.name);
???? $("#price").html(data.price);
???? $("#owner").html(data.owner);
???? },
???? // 請求出錯時調用的函數
???? error:function(){
????? alert("數據發送失敗");
???? }
?});
}
</script>
</head>
<body>
<div class="panel panel-primary">
?<div class="panel-heading">
??<h3 class="panel-title">Spring Boot中Java對象轉換JSON</h3>
?</div>
</div>
<div class="container">
?<div class="row">
??<div class="col-md-4">
???<p>照片：<img id="image" src="images/1.jpg" width="60" height="60"/></p>
???<p>名字：<span id="name"></span></p>
???<p>價格：<span id="price"></span></p>
???<p>主人：<span id="owner"></span></p>
??</div>
?</div>
</div>
</body>
</html>

四、創建AppController控制器

package com.ysh.jsontest.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class AppController {

? @RequestMapping(value = "/index")
? public String index() {
????? return "index";
? }
?
? @RequestMapping(value = "/getjson")
? public String getjson() {
???? return "getjson";
? }

}

五、創建DogController控制器

package com.ysh.jsontest.controller;

import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.ysh.jsontest.domain.Dog;
@RestController
public class DogController {
?
?/**
? * Spring Boot默認使用jackson框架解析jason
? * */
?@RequestMapping("/findDog")
?public Dog findDog(@RequestBody Dog dog){
??// 觀察頁面傳入的json數據是否封裝到Dog對象
??System.out.println(dog);
??// 設置dog其他信息
??dog.setImage("2.jpg");
??dog.setPrice(58.0);
??dog.setOwner("badao");
??return dog;
?}

附：

??? findDog中的參數@RequestBody? Dog dog 表示，使用@RequestBody注解獲取頁面傳遞的參數后，將JSON數據設置到對應的Book的屬性中。

六、啟動測試項目

項目啟動后，在瀏覽器輸入：http://localhost:8080/index

請求會提交到AppController類的index方法進行處理，傳遞JSON數據，該方法返回index字符串，即轉到template/index.html中

七、啟動測試SpringBoot轉換集合數據

getjson.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Spring Boot Web開發測試</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
<script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript">
$(document).ready(function(){
?findDogs();
});
function findDogs(){
?$.post("/finddogs",null,
???function(data){
??$.each(data,function(){
???var tr? = $("<tr/>");
???$("<img/>").attr("src","images/"+this.image).attr("height",60).attr("width",60).appendTo("<td/>").appendTo(tr);
??????????? $("<td/>").html(this.name).appendTo(tr);
??????????? $("<td/>").html(this.price).appendTo(tr);
??????????? $("#dogtable").append(tr);
??????? })
?},"json");
}
</script>
</head>
<body>
?<div class="panel panel-primary">
??<div class="panel-heading">
???<h3 class="panel-title">Spring Boot中集合轉換JSON</h3>
??</div>
?</div>
?
?<div class="container">
??<div class="col-md-12">
???<div class="panel panel-primary">
??????
????<div class="panel-heading">
???????
???? ?? <h3 class="panel-title">圖書信息列表</h3>
???? </div>
???? <div class="panel-body">
????
????<div class="table table-responsive">
?????
?????<table class="table table-bordered table-hover" id="dogtable">
??????<thead>
???????<tr>
????????<th class="text-center">照片</th >
????????<th class="text-center">名字</th>
????????<th class="text-center">價格</th >
???????</tr>
??????</thead>
??????<tbody class="text-center"></tbody>
?????</table>
????</div>
???</div>
???</div>
??</div>
?</div>
</body>
</html>

附：

jQuery中選擇器加尖括號的區別:

$("<img/>")：

https://blog.csdn.net/badao_liumang_qizhi/article/details/80987336

getjson.html頁面使用jQuery發送請求，頁面載入時調用findDogs函數，它會發送異步請求到“/finddogs”,請求成功后會返回一個JSON數據，包含多個狗狗信息，接著將返回的數據使用jQuery設置到頁面的table表單當中。

八、向DogController控制器中加入代碼

?@RequestMapping("/finddogs")
?public List<Dog> findBooks(){
??// 創建集合
??List<Dog> dogs = new ArrayList<Dog>();
??// 添加狗對象
??dogs.add(new Dog(1, "巴扎黑1", "1.jpg",109.00,"ysh"));
??dogs.add(new Dog(2, "巴扎黑2", "2.jpg",108.00,"badao"));
??dogs.add(new Dog(3, "巴扎黑3", "3.jpg",58.00,"liumang"));
??dogs.add(new Dog(4, "巴扎黑4", "4.jpg",108.00,"qi"));
??dogs.add(new Dog(5, "巴扎黑5", "5.jpg",79.00,"zhi"));
??? ?// 返回集合
??? ?return dogs;
?}

springboot會將List數據轉換成JSON格式后返回到客戶端

九、測試返回的集合轉換成JSON

運行APP:參照

https://blog.csdn.net/badao_liumang_qizhi/article/details/80948956

訪問：http://localhost:8080/getjson

請求響應如圖：

代碼下載：

https://download.csdn.net/download/badao_liumang_qizhi/10533476

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的SpringBoot处理JSON数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jQuery中选择器加尖括号的区别
下一篇： SpringBoot实现注册时头像上传与