外部js怎么用java变量

外部 JavaScript 怎么用 Java 变量？
通过请求接口、使用 AJAX、在 HTML 中嵌入、WebSocket、使用模板引擎等方式可以实现外部 JavaScript 使用 Java 变量。详细来说，最常见和实用的方法是通过请求接口。通过这种方式，可以在 Java 后台通过 API 将数据传递给前端，然后在前端的 JavaScript 中使用这些数据。

一、通过请求接口

在现代 Web 应用中，最常见的做法是通过 RESTful API 或者其他形式的接口请求，将 Java 变量传递给 JavaScript。下面详细讲解这种方法。

1. 创建 Java 后台接口

首先，需要在 Java 后台创建一个接口，用于返回需要传递的数据。假设我们使用 Spring Boot 框架，代码如下：

@RestController
@RequestMapping("/api")
public class DataController {
    @GetMapping("/getData")
    public ResponseEntity<Map<String, Object>> getData() {
        Map<String, Object> data = new HashMap<>();
        data.put("variable", "This is a Java variable");
        return new ResponseEntity<>(data, HttpStatus.OK);
    }
}

2. 前端使用 AJAX 请求接口

在前端 JavaScript 中，可以使用 AJAX 请求这个接口，获取数据并使用。以下是一个简单的示例，使用 jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
    $.ajax({
        url: '/api/getData',
        method: 'GET',
        success: function(response) {
            console.log(response.variable); // 输出 "This is a Java variable"
        },
        error: function(error) {
            console.log(error);
        }
    });
</script>
</body>
</html>

二、使用 AJAX

使用 AJAX 是一种非常灵活的方式，可以通过各种 JavaScript 库（如 jQuery、Axios、Fetch API）来实现。下面使用原生的 Fetch API 来实现：

1. Java 后台接口（同上）

@RestController
@RequestMapping("/api")
public class DataController {
    @GetMapping("/getData")
    public ResponseEntity<Map<String, Object>> getData() {
        Map<String, Object> data = new HashMap<>();
        data.put("variable", "This is a Java variable");
        return new ResponseEntity<>(data, HttpStatus.OK);
    }
}

2. 前端使用 Fetch API 请求接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
</head>
<body>
<script>
    fetch('/api/getData')
        .then(response => response.json())
        .then(data => {
            console.log(data.variable); // 输出 "This is a Java variable"
        })
        .catch(error => console.error('Error:', error));
</script>
</body>
</html>

三、在 HTML 中嵌入

如果变量是静态的，或者在页面加载时已经确定，可以直接在 HTML 中嵌入 Java 变量。通过 JSP 或 Thymeleaf 等模板引擎，可以将 Java 变量嵌入到 HTML 中。

1. 使用 JSP 直接嵌入 Java 变量

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
</head>
<body>
<% String javaVariable = "This is a Java variable"; %>
<script>
    var jsVariable = "<%= javaVariable %>";
    console.log(jsVariable); // 输出 "This is a Java variable"
</script>
</body>
</html>

2. 使用 Thymeleaf 嵌入 Java 变量

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
</head>
<body>
<script th:inline="javascript">
    /*<![CDATA[*/
    var jsVariable = [[${javaVariable}]];
    console.log(jsVariable); // 输出 "This is a Java variable"
    /*]]>*/
</script>
</body>
</html>

四、WebSocket

对于需要实时通信的应用，可以使用 WebSocket 将 Java 变量传递给 JavaScript。WebSocket 提供了一个全双工通信协议，可以在客户端和服务器之间建立持久连接，实时传递数据。

1. Java 后台 WebSocket 配置

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws");
    }
}

2. Java WebSocket Handler

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class MyWebSocketHandler extends TextWebSocketHandler {
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String javaVariable = "This is a Java variable";
        session.sendMessage(new TextMessage(javaVariable));
    }
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // Handle received message
    }
}

3. 前端 JavaScript 使用 WebSocket

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
</head>
<body>
<script>
    var socket = new WebSocket('ws://localhost:8080/ws');
    socket.onmessage = function(event) {
        console.log(event.data); // 输出 "This is a Java variable"
    };
    socket.onopen = function() {
        console.log('WebSocket connection established');
    };
    socket.onclose = function() {
        console.log('WebSocket connection closed');
    };
    socket.onerror = function(error) {
        console.log('WebSocket error: ' + error);
    };
</script>
</body>
</html>

五、使用模板引擎

使用模板引擎（如 Thymeleaf、Freemarker 等）可以方便地在 HTML 中嵌入 Java 变量，从而使 JavaScript 能够使用这些变量。

1. 使用 Thymeleaf

// 在 Java 控制器中设置变量
@Controller
public class WebController {
    @GetMapping("/page")
    public String getPage(Model model) {
        model.addAttribute("javaVariable", "This is a Java variable");
        return "page";
    }
}

2. Thymeleaf 模板页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Java to JavaScript</title>
</head>
<body>
<script th:inline="javascript">
    /*<![CDATA[*/
    var jsVariable = [[${javaVariable}]];
    console.log(jsVariable); // 输出 "This is a Java variable"
    /*]]>*/
</script>
</body>
</html>

总结

以上介绍了多种方式实现外部 JavaScript 使用 Java 变量，包括通过请求接口、使用 AJAX、在 HTML 中嵌入、WebSocket 和使用模板引擎等方法。每种方法都有其适用的场景：

通过请求接口 和 使用 AJAX：适用于需要动态获取数据的场景，可以灵活处理各种请求。
在 HTML 中嵌入：适用于静态变量或者在页面加载时已经确定的变量。
WebSocket：适用于需要实时通信的应用场景。
使用模板引擎：适用于使用模板引擎渲染页面的项目。

在实际开发中，可以根据具体需求选择合适的方法。如果项目涉及到复杂的协作和管理需求，可以考虑使用专业的项目管理系统，如研发项目管理系统 PingCode 和 通用项目协作软件 Worktile，来提升开发效率和团队协作效果。