利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细

简介: 利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细

在Spring Boot的Web应用中 内置了JSON数据的解析功能,默认使用Jackson自动完成解析(不需要解析加载Jackson依赖包)当控制器返回一个Java对象或集合数据时 Spring Boot自动将其转换成JSON数据,使用起来很方便简洁。

Spring Boot处理JSON数据时,需要用到两个重要的JSON格式转换注解,分别是@RquestBody

@ResponseBody 他们的作用分别如下

@RequestBody:用于将请求体中的数据绑定到方法的形参中,该注解应用在方法的形参上

@ResponseBody:用于直接返回JSON对象 该注解应用在方法上

下面通过一个实例讲解Spring Boot处理JSON数据的过程,该实例针对返回实体对象,ArrayList集合,Map<String,Object>集合以及List<Map<String,Object>>集合分别处理

步骤如下

1:创建实体类

在应用的com.ch.ch5_2.model包中 创建实体类Preson  代码如下

package com.ch.ch5_2.model;
public class Preson {
  private String pname;
  private String password;
  private Integer page;
  public String getPname() {
    return pname;
  }
  public void setPname(String pname) {
    this.pname = pname;
  }
  public String getPassword() {
    return password;
  }
  public void setPassword(String password) {
    this.password = password;
  }
  public Integer getPage() {
    return page;
  }
  public void setPage(Integer page) {
    this.page = page;
  }
}

2:创建视图页面

在src/main/resources/templates目录下 创建视图页面 input.html 并且引入jQuery框架 并使用它的ajax方法进行异步请求 部分代码如下(此处需要一些Java Web开发的知识  如有不明白的可以参考我之前的博客 进主页就有)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<!-- 默认访问 src/main/resources/static下的css文件夹-->
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}" />
<!-- 引入jQuery -->
<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
<script type="text/javascript">
  function testJson() {
    //获取输入的值pname为id
    var pname = $("#pname").val();
    var password = $("#password").val();
    var page = $("#page").val();
    alert(password);
    $.ajax({
      //发送请求的URL字符串
      url : "testJson",
      //定义回调响应的数据格式为JSON字符串,该属性可以省略
      dataType : "json",
      //请求类型
      type : "post",
      //定义发送请求的数据格式为JSON字符串
      contentType : "application/json",
      //data表示发送的数据
      data : JSON.stringify({pname:pname,password:password,page:page}),
      //成功响应的结果
      success : function(data){
        if(data != null){
          //返回一个Person对象
          //alert("输入的用户名:" + data.pname + ",密码:" + data.password + ",年龄:" +  data.page);
          //ArrayList<Person>对象
          /**for(var i = 0; i < data.length; i++){
            alert(data[i].pname);
          }**/
          //返回一个Map<String, Object>对象
          //alert(data.pname);//pname为key
          //返回一个List<Map<String, Object>>对象
          for(var i = 0; i < data.length; i++){
            alert(data[i].pname);
          }
        }
      },
      //请求出错
      error:function(){
        alert("数据发送失败");
      }
    });
  }
</script>
</head>
hicon-pencil"></i>
              </span>
              <input class="form-control" type="text"
               id="pname" th:placeholder="请输入用户名"/>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group col-md-6">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-pencil"></i>
              </span>
              <input class="form-control" type="text"
               id="password" th:placeholder="请输入密码"/>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group col-md-6">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-pencil"></i>
              </span>
              <input class="form-control" type="text"
               id="page" th:placeholder="请输入年龄"/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-6">
              <div class="btn-group btn-group-justified">
                <div class="btn-group">
                  <button type="button" onclick="testJson()" class="btn btn-success">
                    <span class="glyphicon glyphicon-share"></span>
                    &nbsp;测试
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

3:创建控制器

在ch5_2应用的com.ch.ch5_2.controller包中  创建控制器类TestJsonController 在该类中有两个处理方法,一个时界面导航方法,一个是接受页面请求的方法 部分代码如下

package com.test.ch3_2.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ch.ch5_2.model.Preson;
@Controller
public class TestJsonController {
  /**
   * 进入视图页面
   */
  @RequestMapping("/input")
  public String input() {
    return "input";
  }
  /**
   * 接收页面请求的JSON数据
   */
  @RequestMapping("/testJson")
  @ResponseBody
  /*@RestController注解相当于@ResponseBody + @Controller合在一起的作用。
  1) 如果只是使用@RestController注解Controller,则Controller中的方法无法返回jsp页面或者html,
  返回的内容就是Return的内容。
  2) 如果需要返回到指定页面,则需要用 @Controller注解。如果需要返回JSON,XML或自定义mediaType内容到页面,
  则需要在对应的方法上加上@ResponseBody注解。
    */
  public List<Map<String, Object>> testJson(@RequestBody Preson user) {
    //打印接收的JSON格式数据
    System.out.println("pname=" + user.getPname() +
        ", password=" + user.getPassword() + ",page=" + user.getPage());
    //返回Person对象
    Map<String, Object> map1 = new HashMap<String, Object>();
    map1.put("pname", "陈恒3");
    map1.put("password", "54321");
    map1.put("page", 55);
    allp.add(map1);
    return allp;
  }
}

然后运行Ch52Application主类 然后访问http://localhost:8080/ch5_2/input

运行效果如下

 

相关文章
|
11天前
|
缓存 前端开发 Java
【Java】仓库管理系统 SpringBoot+LayUI+DTree(源码)【独一无二】
【Java】仓库管理系统 SpringBoot+LayUI+DTree(源码)【独一无二】
|
26天前
|
JSON 前端开发 JavaScript
|
1月前
|
XML 缓存 Java
Spring源码之 Bean 的循环依赖
循环依赖是 Spring 中经典问题之一,那么到底什么是循环依赖?简单说就是对象之间相互引用, 如下图所示: 代码层面上很好理解,在 bean 创建过程中 class A 和 class B 又经历了怎样的过程呢? 可以看出形成了一个闭环,如果想解决这个问题,那么在属性填充时要保证不二次创建 A对象 的步骤,也就是必须保证从容器中能够直接获取到 B。 一、复现循环依赖问题 Spring 中默认允许循环依赖的存在,但在 Spring Boot 2.6.x 版本开始默认禁用了循环依赖 1. 基于xml复现循环依赖 定义实体 Bean java复制代码public class A {
|
23天前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
26 1
|
27天前
|
JSON 算法 安全
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
25 0
什么是JWT(Json-Web-Token)?JWT的用途和优势是什么?讲解+实战,一篇文章学会JWT怎么用!
|
1天前
|
数据采集 前端开发 Java
数据塑造:Spring MVC中@ModelAttribute的高级数据预处理技巧
数据塑造:Spring MVC中@ModelAttribute的高级数据预处理技巧
13 3
|
1天前
|
前端开发 Java Spring
数据之桥:深入Spring MVC中传递数据给视图的实用指南
数据之桥:深入Spring MVC中传递数据给视图的实用指南
12 3
|
10天前
|
JavaScript Java 关系型数据库
基于 java + Springboot + vue +mysql 大学生实习管理系统(含源码)
本文档介绍了基于Springboot的实习管理系统的设计与实现。系统采用B/S架构,旨在解决实习管理中的人工管理问题,提高效率。系统特点包括对用户输入的验证和数据安全性保障。功能涵盖首页、个人中心、班级管理、学生管理、教师管理、实习单位管理、实习作业管理、教师评分管理、单位成绩管理和系统管理等。用户分为管理员、教师和学生,各自有不同的操作权限。
|
24天前
|
Java Spring
使用spring实现邮件的发送(含测试,源码,注释)
使用spring实现邮件的发送(含测试,源码,注释)
7 0
|
24天前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
10 0