掌握Java前端传JSON至后端：一步到位的实用教程

引言

在Java后端开发中，前端与后端之间的数据交互是至关重要的。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。本文将详细介绍如何在前端使用JavaScript将JSON数据发送到Java后端，并接收响应。

前端准备

1. 创建JSON数据

在JavaScript中，你可以使用对象字面量或JSON.stringify()方法创建JSON数据。

// 使用对象字面量 let jsonData = { username: "user1", password: "password123" }; // 使用JSON.stringify() let jsonData = JSON.stringify({ username: "user1", password: "password123" });

2. 使用XMLHttpRequest或Fetch API发送数据

以下是使用XMLHttpRequest和Fetch API发送JSON数据的示例。

使用XMLHttpRequest

function sendDataUsingXHR() { let xhr = new XMLHttpRequest(); xhr.open("POST", "http://your-backend-url/api/data", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(jsonData); }

使用Fetch API

async function sendDataUsingFetch() { let response = await fetch("http://your-backend-url/api/data", { method: "POST", headers: { "Content-Type": "application/json" }, body: jsonData }); let data = await response.json(); console.log(data); }

后端准备

1. 创建Java后端项目

使用Java和Spring Boot框架可以快速搭建一个后端项目。

// 创建一个Spring Boot项目 @SpringBootApplication public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); } }

2. 创建Controller接收数据

在Spring Boot项目中，创建一个Controller来处理前端发送的JSON数据。

@RestController @RequestMapping("/api/data") public class DataController { @PostMapping public ResponseEntity<String> receiveData(@RequestBody String jsonData) { System.out.println("Received JSON: " + jsonData); return ResponseEntity.ok("Data received"); } }