json在前端与Java后端的数据交互

Tin9898

已于 2024-03-11 18:36:10 修改

阅读量399

点赞数 10

文章标签： json 前端 java

于 2024-03-11 18:03:56 首次发布

本文链接：https://blog.csdn.net/qq_61818443/article/details/136631144

版权

本文展示了一个使用SpringBoot构建的Java后端应用，通过RESTfulAPI提供数据，与一个简单的HTML前端进行交互，使用XMLHttpRequest发送GET请求获取数据并在页面上显示。

摘要由CSDN通过智能技术生成

以

下是一个简单的示例，包括了一个使用Spring Boot框架的Java后端应用和一个简单的HTML网页前端，演示了如何通过HTTP请求和响应进行数据交换。在这个示例中，我们将使用HTTP GET请求从Java后端获取数据，并在网页前端显示返回的数据。

Java后端代码（使用Spring Boot框架）：

// DataController.java
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DataController {

    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        String jsonData = "{\"name\": \"Alice\", \"age\": 25}";
        return ResponseEntity.ok(jsonData);
    }
}

// Application.java
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

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

网页前端代码（使用HTML和JavaScript）：

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

    <script>
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById('dataDisplay').innerText = 'Name: ' + data.name + ', Age: ' + data.age;
                }
            }
        };
        xhr.open('GET', '/api/data');
        xhr.send();
    </script>
</body>
</html>

var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
xhr.onreadystatechange = function() { // 当XMLHttpRequest对象的状态发生改变时触发的事件处理函数
    if (xhr.readyState === XMLHttpRequest.DONE) { // 检查XMLHttpRequest对象的状态是否为DONE（即4），表示请求已完成
        if (xhr.status === 200) { // 检查响应的状态码是否为200，表示请求成功
            var data = JSON.parse(xhr.responseText); // 将从后端获取的JSON格式数据解析为JavaScript对象
            document.getElementById('dataDisplay').innerText = 'Name: ' + data.name + ', Age: ' + data.age; // 将返回的数据显示在id为"dataDisplay"的div元素中
        }
    }
};
xhr.open('GET', '/api/data'); // 使用HTTP GET方法打开一个到"/api/data"的URL的新请求
xhr.send(); // 发送HTTP请求

代码注释：

在这段代码中，我们首先创建了一个新的XMLHttpRequest对象，然后为其设置了一个onreadystatechange事件处理函数。当XMLHttpRequest对象的状态发生改变时，这个事件处理函数会被触发。在事件处理函数内部，我们首先检查XMLHttpRequest对象的状态是否为DONE（即4），表示请求已完成，然后再检查响应的状态码是否为200，表示请求成功。如果请求成功，我们将从后端获取的JSON格式数据解析为JavaScript对象，并将其显示在id为"dataDisplay"的div元素中。

这段代码实现了通过JavaScript向后端发送HTTP GET请求，获取数据并在页面上显示返回的数据的功能。

在这个示例中，我们创建了一个名为DataController的类来提供API接口，其中包含一个名为"/api/data"的接口，通过HTTP GET请求获取数据。在网页前端的HTML文件中，我们使用JavaScript发起了一个AJAX请求来获取数据，并在页面上显示返回的数据。

希望这个完整的前后端代码示例能够帮助您更好地理解Java后端与网页前端通过HTTP请求和响应进行数据交换的过程。