jQuery如何直接调用Java方法？-杰瑞科技汇

浏览器中的 JavaScript（包括 jQuery）无法直接运行在服务器上的 Java 代码。 它们必须通过一个中间层进行通信，这个中间层就是 HTTP 请求。

（图片来源网络，侵删）

整个流程是：

前端 (jQuery)：发起一个 HTTP 请求（通常是 GET 或 POST）到服务器上的一个特定 URL。
后端 (Java)：有一个 Web 服务器（如 Tomcat, Jetty）正在监听这个 URL，这个 URL 对应着一个由 Java 编写的控制器或 Servlet。
Java 代码：控制器接收到请求后，执行你想要的 Java 业务逻辑方法。
响应：Java 代码将执行结果（数据）打包成 JSON 或 XML 格式，然后通过 HTTP 响应返回给前端。
前端 (jQuery)：接收到 HTTP 响应，解析 JSON 数据，并更新页面内容。

下面我们通过一个完整的、分步的例子来演示这个过程，我们将使用非常流行的 Spring Boot 作为后端框架，因为它极大地简化了 Java Web 应用的开发，如果你使用的是传统的 Servlet 或其他框架（如 Struts, JSF），原理也是一样的，只是代码写法不同。

准备工作

前端环境:
- 一个 HTML 文件。
- 引入 jQuery 库（从 CDN 引入最方便）。
后端环境:
（图片来源网络，侵删）
- 安装 JDK。
- 使用 Maven 或 Gradle 创建一个 Spring Boot 项目。
- 添加 Spring Web 依赖，用于创建 Web 应用和 RESTful API。

第 1 步：创建前端页面 (index.html)

这个页面包含一个按钮,点击按钮后会触发 jQuery 代码去调用后端 Java 方法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 调用 Java 方法示例</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery 调用 Java 方法</h1>
    <button id="callJavaMethodBtn">调用 Java 方法获取当前时间</button>
    <div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; display: none;">
        <strong>从 Java 返回的结果:</strong>
        <p id="resultContent"></p>
    </div>
    <script>
        $(document).ready(function() {
            // 当按钮被点击时
            $("#callJavaMethodBtn").on("click", function() {
                // 1. 使用 jQuery 的 $.ajax 发起 HTTP 请求
                $.ajax({
                    // 请求的目标 URL，这个 URL 将映射到我们的 Java 控制器
                    url: "/api/getCurrentTime",
                    // 请求方法，GET 用于获取数据
                    type: "GET",
                    // 我们期望服务器返回的数据类型是 JSON
                    dataType: "json",
                    // 成功回调函数，当服务器成功响应时执行
                    success: function(response) {
                        console.log("成功接收到数据:", response);
                        // 从响应对象中取出数据
                        const serverTime = response.serverTime;
                        const message = response.message;
                        // 将数据显示在页面上
                        $("#resultContent").html(message + "<br>服务器时间: " + serverTime);
                        $("#result").show();
                    },
                    // 错误回调函数，当请求失败时执行
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("请求失败:", textStatus, errorThrown);
                        $("#resultContent").text("调用失败: " + textStatus);
                        $("#result").show();
                    }
                });
            });
        });
    </script>
</body>
</html>

前端代码解析:

$.ajax({...}) 是 jQuery 发起异步请求的核心方法。
url: 指定了要请求的后端接口地址，这个地址是我们自己定义的。
type: 请求方法，GET 是最常用的。
dataType: 告诉 jQuery 预期服务器会返回 JSON 格式的数据，jQuery 会自动解析这个 JSON 字符串成一个 JavaScript 对象。
success: 请求成功后的回调函数，response 参数就是服务器返回的、已经被解析好的 JavaScript 对象。
error: 请求失败后的回调函数（网络错误、404 Not Found、500 服务器内部错误等）。

第 2 步：创建后端 Java 代码 (Spring Boot)

我们需要创建一个控制器来处理前端发来的 /api/getCurrentTime 请求。

1 添加 Maven 依赖

在你的 pom.xml 文件中，确保有 spring-boot-starter-web 依赖：

（图片来源网络，侵删）

<dependencies>
    <!-- Spring Boot Web Starter 用于创建 Web 应用和 RESTful API -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 如果你使用 Lombok 来简化代码，可以加上这个 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

2 创建控制器类

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
// @RestController 是一个组合注解，相当于 @Controller + @ResponseBody
// 它告诉 Spring 这个类中的所有方法返回的数据都直接写给浏览器，
// 并且是作为 HTTP 响应体的内容（通常是 JSON 或 XML）。
@RestController
// @RequestMapping 定义了这个控制器下所有方法的公共前缀
@RequestMapping("/api")
public class MyJavaMethodController {
    // @GetMapping 注解将 HTTP GET 请求映射到这个方法上
    // 当请求 URL 是 "/api/getCurrentTime" 且方法是 GET 时，就会执行这个方法
    @GetMapping("/getCurrentTime")
    public ServerTimeResponse getCurrentTime() {
        // 1. 执行你的 Java 逻辑
        // 这里我们只是获取当前服务器时间
        LocalDateTime now = LocalDateTime.now();
        String formattedTime = now.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
        // 2. 创建一个响应对象
        // 为了返回结构化的数据，最好创建一个专门的响应类
        ServerTimeResponse response = new ServerTimeResponse();
        response.setServerTime(formattedTime);
        response.setMessage("成功获取服务器时间！");
        // 3. Spring Boot 会自动将这个 Java 对象转换成 JSON 格式并返回给前端
        // 默认使用 Jackson 库进行序列化
        return response;
    }
}
// 这是一个简单的响应数据载体类
// Lombok 的 @Data 注解会自动生成 getter, setter, toString 等方法
class ServerTimeResponse {
    private String message;
    private String serverTime;
    // getter 和 setter 方法
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public String getServerTime() {
        return serverTime;
    }
    public void setServerTime(String serverTime) {
        this.serverTime = serverTime;
    }
}

后端代码解析:

@RestController: 核心注解，标记这个类为 RESTful 风格的控制器，它处理 HTTP 请求并返回数据（通常是 JSON）。
@RequestMapping("/api"): 为控制器设置一个基础路径，所有 /api 下的请求都会先经过这里。
@GetMapping("/getCurrentTime"): 精确地映射 GET /api/getCurrentTime 请求到 getCurrentTime() 方法。
getCurrentTime() 方法：这就是我们“被 jQuery 调用”的 Java 方法，它执行业务逻辑（获取时间），然后将结果封装在一个 ServerTimeResponse 对象中返回。
自动序列化: Spring Boot 的 spring-boot-starter-web 默认集成了 Jackson 库，当你从一个 @RestController 方法返回一个 Java 对象时，Jackson 会自动将其序列化为 JSON 字符串，并设置正确的 Content-Type 为 application/json。

第 3 步：运行和测试

运行后端:
- 运行你的 Spring Boot 主程序（通常是一个带有 @SpringBootApplication 注解的类）。
- 服务器启动后,会默认监听 8080 端口。
打开前端:
- 将 index.html 文件用浏览器打开。
进行测试:
- 打开浏览器的开发者工具（F12），切换到 "Network" (网络) 标签页。
- 点击页面上的 "调用 Java 方法获取当前时间" 按钮。
- 你会看到：
  - Network 标签页中出现了一个名为 getCurrentTime 的请求，状态码为 200 OK，点击它，可以在 "Response" 标签页看到返回的 JSON 数据：{"message":"成功获取服务器时间！","serverTime":"2025-10-27 10:30:00"}。
  - Console (控制台) 会打印 成功接收到数据: {message: "成功获取服务器时间！", serverTime: "2025-10-27 10:30:00"}。
  - 页面下方会显示从服务器返回的结果。

总结与关键点

部分	关键技术/概念	作用
通信协议	HTTP/HTTPS	前端和后端之间通信的基础。
前端技术	jQuery `$.ajax()`	发起异步 HTTP 请求的核心工具。
后端技术	Spring Boot `@RestController`	接收 HTTP 请求并返回数据（通常是 JSON）。
URL 映射	`@RequestMapping` / `@GetMapping`	将特定的 URL 路径和 HTTP 方法绑定到 Java 方法上。
数据格式	JSON (JavaScript Object Notation)	前后端数据交换的事实标准，轻量且易于解析。
数据转换	Jackson / Gson	Java 对象 <--> JSON 字符串之间的自动转换。

重要提示:

跨域问题: 如果你的前端页面（http://localhost:9000）和后端 API（http://localhost:8080）不在同一个域名和端口下，浏览器会因为“同源策略”而阻止请求，解决方法是在后端使用 @CrossOrigin 注解来允许跨域访问。
```
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:9000") // 允许来自 http://localhost:9000 的请求
public class MyJavaMethodController { ... }
```
安全性: 对于涉及数据修改或敏感操作的请求，应使用 POST、PUT、DELETE 等 HTTP 方法，并始终进行身份验证和授权。

通过以上步骤,你就完整地实现了“使用 jQuery 调用 Java 方法”的整个流程，这是现代 Web 开发中前后端分离架构的基础。

jQuery如何直接调用Java方法？

准备工作

第 1 步：创建前端页面 (index.html)

第 2 步：创建后端 Java 代码 (Spring Boot)

1 添加 Maven 依赖

2 创建控制器类

第 3 步：运行和测试

总结与关键点

99ANYc3cd6

Java CGLIB动态代理底层实现原理是什么？

VMware安装系统教程具体步骤是什么？

Java.util.regex如何高效匹配与处理正则？

Java.lang.Class是类的核心元数据吗？

Java中compareTo方法如何正确使用？

Java Socket编程实例具体怎么实现？

Java创建字符串对象数组对象数组对象，如何正确操作？

Altium Designer破解教程安全吗？能用多久？

java软件测试方法有哪些方法有哪些方法

java identityhashmap

C如何调用Java的WebService接口？

Oracle 11g在Linux下安装步骤有哪些？

OpenOffice如何用Java操作Word文档？

Python程序ValueWarning如何解决？

Python中else与continue搭配有何特殊作用？

Java线程与Runnable，如何正确创建与启动？

jQuery如何直接调用Java方法？

准备工作

第 1 步：创建前端页面 (index.html)

第 2 步：创建后端 Java 代码 (Spring Boot)

1 添加 Maven 依赖

2 创建控制器类

第 3 步：运行和测试

总结与关键点

相关推荐

Java Socket编程实例具体怎么实现？