java后端给前端弹窗信息

原创

mob64ca12d59fe5 2023-11-30 07:49:46 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d59fe5的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java后端给前端弹窗信息的实现

1. 流程图

flowchart TD
    subgraph 后端
    A[后端准备] --> B[生成弹窗信息]
    end
    subgraph 前端
    C[前端准备] --> D[接收弹窗信息并显示]
    end
    B --> |通过HTTP请求| D

2. 实现步骤

2.1 后端准备

首先，我们需要在后端准备好一个接口，用来响应前端的弹窗请求。这个接口需要处理前端发送的HTTP请求，并返回弹窗信息。

@RestController
public class PopupController {
    @GetMapping("/popup")
    public String getPopupMessage() {
        // 在这里生成弹窗信息
        String message = "这是一个弹窗信息";
        return message;
    }
}

在上面的代码中，我们定义了一个 PopupController 类，并使用 @RestController 注解将它标记为一个控制器。然后，我们使用 @GetMapping("/popup") 注解定义了一个处理 GET 请求的接口 /popup，该接口将返回一个字符串作为弹窗信息。

2.2 前端准备

在前端，我们需要发送一个HTTP请求到后端接口，获取弹窗信息，并在页面上显示。

<button onclick="getPopupMessage()">点击显示弹窗信息</button>
<script>
function getPopupMessage() {
    // 发送HTTP请求获取弹窗信息
    fetch('/popup')
        .then(response => response.text())
        .then(message => {
            // 将弹窗信息显示在页面上
            alert(message);
        });
}
</script>

在上面的代码中，我们在页面上定义了一个按钮，当用户点击按钮时，会调用 getPopupMessage() 函数。这个函数使用 fetch 方法发送一个GET请求到后端的 /popup 接口，并在接收到响应后将弹窗信息显示在页面上。