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

运行效果如下

 

相关文章
N..
|
1月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
18 1
|
1月前
|
XML Java 数据库连接
spring boot 参数的过滤注解与实战
在Spring Boot应用中,对于入参的过滤,通常会涉及到对Web层的数据验证和处理。Spring Boot借助Spring框架提供了强大的验证框架支持,主要基于JSR-303/JSR-380(Bean Validation API)规范,以及Spring自身的@Valid或@Validated注解来实现请求参数的验证。以下是一些常见的使用案例来展示如何对参数进行过滤和验证。
29 1
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
42 0
|
1月前
|
Java Spring 容器
【二十二】springboot整合拦截器实战并对比过滤器
【二十二】springboot整合拦截器实战并对比过滤器
33 0
|
1月前
|
存储 搜索推荐 Java
|
2月前
|
Dubbo Java 应用服务中间件
实战指南:如何在Spring Boot中无缝整合Dubbo【四】
实战指南:如何在Spring Boot中无缝整合Dubbo【四】
45 0
|
1月前
|
人工智能 JSON 前端开发
【Spring boot实战】Springboot+对话ai模型整体框架+高并发线程机制处理优化+提示词工程效果展示(按照框架自己修改可对接市面上百分之99的模型)
【Spring boot实战】Springboot+对话ai模型整体框架+高并发线程机制处理优化+提示词工程效果展示(按照框架自己修改可对接市面上百分之99的模型)
|
2月前
|
数据采集 存储 缓存
SpringBoot与布隆过滤器的完美邂逅:高效防护大规模数据的奇妙结合【实战】
SpringBoot与布隆过滤器的完美邂逅:高效防护大规模数据的奇妙结合【实战】
100 0
|
2月前
|
消息中间件 NoSQL Java
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】
227 1
|
2月前
|
监控 IDE Java
Java项目调试实战:如何高效调试Spring Boot项目中的GET请求,并通过equalsIgnoreCase()解决大小写不一致问题
Java项目调试实战:如何高效调试Spring Boot项目中的GET请求,并通过equalsIgnoreCase()解决大小写不一致问题
45 0