程序笔记

在Web开发中利用HTML获取Java后端发送的数据

2024-07-03 58

首先，理解一个基本的原理：HTML主要负责展示数据，而Java（通常搭配Spring Boot、Struts等框架）作为后端服务端语言，处理业务逻辑并提供数据接口。两者之间的数据传输通常依赖于HTTP协议，通过AJAX、Fetch API或者现在流行的前端框架如React、Vue.js中的异步数据请求来完成。

以下是一个基础示例，说明如何在纯HTML+JavaScript环境下使用XMLHttpRequest对象从Java后端获取数据：

<!DOCTYPE html>
<html>
<head>
    <title>获取Java后端数据</title>
    <script>
        function loadJSON() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    // 在这里处理从后端接收到的数据
                    document.getElementById("result").innerHTML = data.message;
                }
            };
            xhr.open("GET", "http://your-java-backend/api/data";, true);
            xhr.send();
        }
    </script>
</head>
<body onload="loadJSON()">
    <div id="result">数据加载中...</div>
</body>
</html>

上述代码中，我们创建了一个XMLHttpRequest对象，向Java后端的"data"API发起GET请求。当服务器响应就绪且状态码为200（表示成功）时，我们将接收到的JSON格式数据解析，并将其显示在页面上。

而在Java后端，你可能使用Spring MVC框架创建一个Controller方法来返回JSON数据：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import com.fasterxml.jackson.databind.ObjectMapper;

@RestController
public class DataController {

    @GetMapping("/api/data")
    public String getData() {
        Map<String, String> data = new HashMap<>();
        data.put("message", "Hello from Java backend!");
        return new ObjectMapper().writeValueAsString(data);
    }
}

以上就是一个简单的前后端数据交互过程。实际上，实际项目中可能还会涉及到更复杂的处理，如身份验证、错误处理、分页和过滤等。

更新于：2个月前

赞一波！

文章评论

全部评论

雷达智富

雷达智富

程序笔记

在Web开发中利用HTML获取Java后端发送的数据

相关文章

文章评论