java基于JSON实现前后端交互(附代码)

更新时间：2024年01月30日 10:27:44 作者：程序小勇

本文主要介绍了java基于JSON实现前后端交互,通过实际代码示例展示了如何前后端JSON交互,具有一定的参考价值,感兴趣的可以了解一下

前后端交互过程

前端（通常是用户界面）与后端（服务器端）之间的数据和信息传递过程。这种交互是通过网络完成的，通常使用HTTP协议。以下是前后端交互的一般步骤：

前端发送请求： 前端通过浏览器发起HTTP请求，请求可以是GET、POST、PUT、DELETE等不同类型，取决于要执行的操作。例如，当用户在浏览器中点击一个链接或提交一个表单时，前端会发送HTTP请求。
后端接收请求： 服务器端接收到前端发送的HTTP请求。服务器上运行的后端应用程序（如Web服务器、应用服务器）根据请求的URL和方法来确定要执行的操作。
后端处理请求： 后端处理接收到的请求，可能包括数据库查询、业务逻辑处理等。后端可以使用不同的编程语言和框架来实现这些操作，如Node.js、Django、Flask、Spring等。
后端发送响应： 后端处理完成后，将结果封装成HTTP响应返回给前端。响应包括HTTP状态码、响应头和响应体。响应体中通常包含了请求的结果数据，可以是HTML、JSON等格式。
前端接收响应： 前端接收到后端返回的HTTP响应。根据响应的内容和状态码，前端决定如何更新用户界面。例如，可以通过JavaScript来动态更新页面内容，或者根据响应数据执行相应的操作。
前端展示数据： 如果后端返回的是数据，前端可以将这些数据渲染到用户界面上，以便用户查看。这可能涉及到更新页面的一部分，或者完全刷新页面，具体取决于应用的设计和要求。

JSON的理解

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集，但由于其简洁和易读的特性，成为了一种通用的数据格式，用于在不同编程语言之间进行数据交换。

JSON由键值对组成，类似于JavaScript中的对象。一个JSON对象是一个无序的集合，其中的键（属性名）和值之间用冒号分隔，不同键值对之间用逗号分隔。JSON的基本数据类型包括字符串、数字、布尔值、对象、数组和null。

以下是一个简单的JSON示例：

{
  "name": "ChengxuXiaoyong",
  "age": 18,
  "isStudent": true,
  "courses": ["Math", "History", "Science"],
  "address": {
    "city": "New York",
    "IDCode": "211747"
  }
}

在这个示例中，有一个包含个人信息的JSON对象，包括姓名、年龄、是否是学生、所修课程和地址。其中，"courses"是一个JSON数组，"address"是一个嵌套的JSON对象。

JSON的优势包括易读性、易于解析和生成、支持多种编程语言、占用空间小等特点，因此在Web开发和API设计中广泛使用。前后端之间的数据交互、配置文件、日志等都可以使用JSON格式。

前端代码实现

使用Java语言和Spring Boot框架的后端代码，接受前端HTML传来的JSON信息并返回相应的响应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frontend Example</title>
</head>
<body>

  <h1>Frontend Example</h1>

  <button onclick="sendDataToBackend()">Send Data to Backend</button>

  <script>
    async function sendDataToBackend() {
      // 准备要发送的数据，这里简单地创建一个JSON对象
      const userData = {
        username: 'john_doe',
        email: 'john.doe@example.com'
      };

      // 使用Fetch API发送POST请求到后端
      const response = await fetch('http://localhost:8080/api/user', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
      });

      // 解析后端返回的JSON响应
      const responseData = await response.json();

      // 打印后端返回的数据
      console.log(responseData);
    }
  </script>

</body>
</html>

后端代码实现

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
public class BackendApplication {

    public static void main(String[] args) {
        SpringApplication.run(BackendApplication.class, args);
    }
}

@RestController
@RequestMapping("/api")
class ApiController {

    @PostMapping("/user")
    public ApiResponse receiveUserData(@RequestBody UserData userData) {
        // 在后端进行处理，这里简单地将收到的数据原样返回
        return new ApiResponse("success", userData);
    }
}

class UserData {
    private String username;
    private String email;

    // getters and setters

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

class ApiResponse {
    private String status;
    private Object data;

    // getters and setters

    public ApiResponse(String status, Object data) {
        this.status = status;
        this.data = data;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

到此这篇关于java基于JSON实现前后端交互(附代码)的文章就介绍到这了,更多相关java JSON前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Java多线程Callable和Future接口区别
这篇文章主要介绍了Java多线程Callable和Future接口区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
MyBatis-Plus中如何实现动态表名
这篇文章主要介绍了MyBatis-Plus中如何实现动态表名问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Mybatis延迟加载和缓存深入讲解
这篇文章主要给大家介绍了关于Mybatis延迟加载和缓存的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
Spring Boot Security 结合 JWT 实现无状态的分布式API接口
JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案。这篇文章主要介绍了Spring Boot Security 结合 JWT 实现无状态的分布式API接口 ,需要的朋友可以参考下
2019-04-04
@JsonSerialize序列化注解的使用
这篇文章主要介绍了@JsonSerialize序列化注解的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
MyBatis-Plus 分页插件配置的两种方式实现
本文主要介绍了MyBatis-Plus 分页插件配置的两种方式实现,包括使用PaginationInterceptor和MybatisPlusInterceptor两种方式,具有一定的参考价值,感兴趣的可以了解一下
2025-03-03
java实现操作系统的短进程作业调度示例分享
java编写的实现了操作系统中的短作业进程，可以实现几道作业同时作业调度
2014-02-02
MyBatis-Plus常见面试题和答案大全
Mybatis-Plus是一个基于Mybatis的增强工具,它简化了Mybatis的开发流程,提供了许多实用的功能,如自动生成代码、分页查询、条件构造器、性能分析等,这篇文章主要给大家介绍了关于MyBatis-Plus常见面试题和答案的相关资料,需要的朋友可以参考下
2023-06-06
深入理解Java反射
在理解反射原理之前先要搞清类型信息。接下来通过本文给大家介绍java反射的深入理解，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
2016-07-07
SpringBoot CommandLineRunner的异步任务机制使用
这篇文章主要介绍了SpringBoot CommandLineRunner的异步任务机制使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08