JSON数据格式与 AJAX 请求

最新推荐文章于 2024-07-21 22:36:34 发布

散漫的大学生

最新推荐文章于 2024-07-21 22:36:34 发布

阅读量2k

点赞数 1

文章标签： json

本文链接：https://blog.csdn.net/weixin_51992178/article/details/127335324

版权

JSON 数据格式

AJAX 请求

JSON 数据格式

JSON 是一种存储键值对数据的格式

它直接包括了属性的名称和属性的值，与 JavaScript 的对象极为相似，它到达前端后，可以直接转换为对象，以对象的形式进行操作和内容的读取

以学生对象为例

{ "name": "杰哥", "age": 18 }

多个学生可以以数组的形式表示

[

{ "name": "杰哥", "age": 18 },

{ "name": "阿伟", "age": 18 }

]

嵌套关系可以表示为

{

"studentList": [

{ "name": "杰哥", "age": 18 },

{ "name": "阿伟", "age": 18 }

],

"count": 2

}

可以直接将JSON数据转化为JS对象

let obj = JSON.parse(
  '{"studentList": [{"name": "杰哥", "age": 18}, {"name": "阿伟", "age": 18}], "count": 2}'
);//将JSON格式字符串转换为JS对象
obj.studentList[0].name; //直接访问第一个学生的名称

将 JS 对象转换为 JSON 字符串

JSON.stringify(obj);

后端就可以以 JSON 字符串的形式向前端返回数据，这样前端在拿到数据之后，就可以快速获取信息

JSON 解析框架有很多种，比较常用的是 Jackson 和 FastJSON

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.78</version>
</dependency>

JSONObject是对 JSON 数据的一种对象表示，它和 Map 的使用方法一样（实现了 Map 接口），同样的还有 JSONArray，它表示一个数组，用法和 List 一样，数组中可以嵌套其他的 JSONObject 或是 JSONArray

@RequestMapping(value = "/index")
public String index(){
    JSONObject object = new JSONObject();
    object.put("name", "杰哥");
    object.put("age", 18);
    System.out.println(object.toJSONString());   //以JSON格式输出JSONObject字符串
    return "index";
}

当出现循环引用时，会按照以下语法来解析

可以直接创建一个实体类，将实体类转换为 JSON 格式的数据

@RequestMapping(value = "/index", produces = "application/json")
@ResponseBody
public String data(){
    Student student = new Student();
    student.setName("杰哥");
    student.setAge(18);
    return JSON.toJSONString(student);
}

修改了`produces`的值，将返回的内容类型设定为`application/json`，表示服务器端返回了一个 JSON 格式的数据（当然不设置也行，也能展示，这样是为了规范）然后我们在方法上添加一个`@ResponseBody`表示方法返回（也可以在类上添加`@RestController`表示此 Controller 默认返回的是字符串数据）的结果不是视图名称而是直接需要返回一个字符串作为页面数据，这样，返回给浏览器的就是我们直接返回的字符串内容。

SpringMVC 非常智能，可以直接返回一个对象类型，它会被自动转换为 JSON 字符串格式

@RequestMapping(value = "/data", produces = "application/json")
@ResponseBody
public Student data(){
    Student student = new Student();
    student.setName("杰哥");
    student.setAge(18);
    return student;
}

注意需要在配置类中添加一下 FastJSON 转换器（默认只支持 JackSon）

@Override

public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {

converters.add(new FastJsonHttpMessageConverter());

}

AJAX 请求

Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），它的目标就是实现页面中的数据动态更新，而不是直接刷新整个页面，只是一个概念

在 JQuery 框架中有实现（JQuery 极大地简化了 JS 的开发）

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

前端界面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script th:src="@{/static/test.js}"></script>
  </head>
  <body>
    <span id="username"></span>
    <span id="age"></span>
    <button onclick="updateData()">点我更新页面数据</button>
  </body>
</html>

js代码

function updateData() {
  //美元符.的方式来使用Ajax请求，这里使用的是get方式，第一个参数为请求的地址（注意需要带上Web应用程序名称），第二个参数为成功获取到数据的方法，data就是返回的数据内容
  $.get("/mvc/data", function (data) {
    //获取成功执行的方法
    window.alert("接受到异步请求数据：" + JSON.stringify(data)); //弹窗展示数据
    $("#username").text(data.name); //这里使用了JQuery提供的选择器，直接选择id为username的元素，更新数据
    $("#age").text(data.age);
  });
}

后端也需要编写相应的发送数据的代码

使用 JQuery 非常方便，可以直接通过 JQuery 的选择器就可以快速获取页面中的元素

向服务端发送一个 JS 对象数据并进行解析

js编写

function submitData() {
  $.post(
    "/mvc/submit",
    {
      //这里使用POST方法发送请求
      name: "测试", //第二个参数是要传递的对象，会以表单数据的方式发送
      age: 18,
    },
    function (data) {
      window.alert(JSON.stringify(data)); //发送成功执行的方法
    }
  );
}

服务器端只需要在请求参数位置添加一个对象接收即可（因为这里是提交的表单数据）

@RequestMapping("/submit")
@ResponseBody
public String submit(Student student){
    System.out.println("接收到前端数据："+student);
    return "{\"success\": true}";
}

也可以将 js 对象转换为 JSON 字符串的形式进行传输，需要使用 ajax 方法来处理

function submitData() {
  $.ajax({
    //最基本的请求方式，需要自己设定一些参数
    type: "POST", //设定请求方法
    url: "/mvc/submit", //请求地址
    data: JSON.stringify({ name: "测试", age: 18 }), //转换为JSON字符串进行发送
    success: function (data) {
      window.alert(JSON.stringify(data));
    },
    contentType: "application/json", //请求头Content-Type一定要设定为JSON格式
  });
}

如果需要读取前端发送给的 JSON 格式数据，那么这个时候就需要添加`@RequestBody`注解

@RequestMapping("/submit")
@ResponseBody
public String submit(@RequestBody JSONObject object){
    System.out.println("接收到前端数据："+object);
    return "{\"success\": true}";
}

实现了前后端使用 JSON 字符串进行通信

散漫的大学生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSON数据格式与 AJAX 请求

修改了`produces`的值，将返回的内容类型设定为`application/json`，表示服务器端返回了一个 JSON 格式的数据（当然不设置也行，也能展示，这样是为了规范）然后我们在方法上添加一个`@ResponseBody`表示方法返回（也可以在类上添加`@RestController`表示此 Controller 默认返回的是字符串数据）的结果不是视图名称而是直接需要返回一个字符串作为页面数据，这样，返回给浏览器的就是我们直接返回的字符串内容。向服务端发送一个 JS 对象数据并进行解析。
复制链接

扫一扫