利用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

运行效果如下

 

相关文章
|
4月前
|
设计模式 Java 开发者
如何快速上手【Spring AOP】?从动态代理到源码剖析(下篇)
Spring AOP的实现本质上依赖于代理模式这一经典设计模式。代理模式通过引入代理对象作为目标对象的中间层,实现了对目标对象访问的控制与增强,其核心价值在于解耦核心业务逻辑与横切关注点。在框架设计中,这种模式广泛用于实现功能扩展(如远程调用、延迟加载)、行为拦截(如权限校验、异常处理)等场景,为系统提供了更高的灵活性和可维护性。
|
8月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
507 70
|
9月前
|
Web App开发 数据采集 前端开发
Python + Chrome 爬虫:如何抓取 AJAX 动态加载数据?
Python + Chrome 爬虫:如何抓取 AJAX 动态加载数据?
|
9月前
|
存储 监控 数据可视化
SaaS云计算技术的智慧工地源码,基于Java+Spring Cloud框架开发
智慧工地源码基于微服务+Java+Spring Cloud +UniApp +MySql架构,利用传感器、监控摄像头、AI、大数据等技术,实现施工现场的实时监测、数据分析与智能决策。平台涵盖人员、车辆、视频监控、施工质量、设备、环境和能耗管理七大维度,提供可视化管理、智能化报警、移动智能办公及分布计算存储等功能,全面提升工地的安全性、效率和质量。
229 0
|
9月前
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
9月前
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
9月前
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
9月前
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件