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

运行效果如下

 

相关文章
|
2月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
44 1
|
3月前
|
JSON 前端开发 JavaScript
|
1月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
19 1
|
1月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
63 2
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
14 2
|
1月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
22 0
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
28 0
|
3月前
|
JSON Java API
解码Spring Boot与JSON的完美融合:提升你的Web开发效率,实战技巧大公开!
【8月更文挑战第29天】Spring Boot作为Java开发的轻量级框架,通过`jackson`库提供了强大的JSON处理功能,简化了Web服务和数据交互的实现。本文通过代码示例介绍如何在Spring Boot中进行JSON序列化和反序列化操作,并展示了处理复杂JSON数据及创建RESTful API的方法,帮助开发者提高效率和应用性能。
137 0
|
3月前
|
JSON Java API
Jackson:SpringBoot中的JSON王者,优雅掌控数据之道
【8月更文挑战第29天】在Java的广阔生态中,SpringBoot以其“约定优于配置”的理念,极大地简化了企业级应用的开发流程。而在SpringBoot处理HTTP请求与响应的过程中,JSON数据的序列化和反序列化是不可或缺的一环。在众多JSON处理库中,Jackson凭借其高效、灵活和强大的特性,成为了SpringBoot中处理JSON数据的首选。今天,就让我们一起深入探讨Jackson如何在SpringBoot中优雅地控制JSON数据。
110 0
|
3月前
|
JSON JavaScript 数据格式
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
html jquery from 表单提交 application/x-www-form-urlencoded 改成 json
37 0