jquery 调用java后台方法-杰瑞科技汇

核心概念

最重要的一点需要明确：jQuery（或任何前端 JavaScript）不能直接“调用”Java 后台的方法。

（图片来源网络，侵删）

这是因为它们运行在不同的环境中：

jQuery (JavaScript)：运行在用户的浏览器中。
Java (后端)：运行在服务器上。

浏览器出于安全考虑,无法直接访问服务器上的代码，它们之间必须通过一种约定好的方式进行通信，这个约定就是 HTTP (HyperText Transfer Protocol)。

我们通常所说的“调用 Java 后台方法”，实际上是：前端发起一个 HTTP 请求（GET、POST），后端服务器（如 Tomcat、Jetty）接收到这个请求，然后调用对应的 Java 方法来处理业务逻辑，最后将处理结果以 HTTP 响应（通常是 JSON 或 HTML 格式）返回给前端。

前端 jQuery 的作用就是：

（图片来源网络，侵删）

创建一个 HTTP 请求。
发送这个请求到指定的 URL。
接收后端返回的响应数据。
处理数据，并更新页面内容。

实现方式

主要有三种主流的实现方式,适用于不同的场景：

传统 Servlet + jQuery (最基础)
Spring MVC + jQuery (最常用、最推荐)
Spring Boot + jQuery (现代、快速开发)

下面我们逐一讲解。

传统 Servlet + jQuery

这种方式是 Java Web 开发的基础，能帮助你理解底层原理。

后端实现 (Servlet)

创建一个普通的 Java Servlet 来处理请求。

（图片来源网络，侵删）

UserInfoServlet.java

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/api/getUserInfo") // 这个 URL 映射很重要
public class UserInfoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 获取请求参数
        String userId = req.getParameter("userId");
        // 2. 模拟业务逻辑，从数据库或服务中获取数据
        // 这里我们简单模拟
        Map<String, Object> userInfo = new HashMap<>();
        if ("123".equals(userId)) {
            userInfo.put("id", "123");
            userInfo.put("name", "张三");
            userInfo.put("age", 30);
        } else {
            userInfo.put("id", null);
            userInfo.put("name", "未知用户");
            userInfo.put("age", 0);
        }
        // 3. 设置响应内容类型为 JSON
        resp.setContentType("application/json;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        // 4. 将 Java 对象转换为 JSON 字符串并输出
        // 注意：实际项目中应使用如 Jackson, Gson 等库来转换，这里为了简化手动拼接
        PrintWriter out = resp.getWriter();
        out.print("{ \"code\": 200, \"message\": \"success\", \"data\": " + userInfo.toString() + " }");
        out.flush();
    }
}

关键点：

@WebServlet("/api/getUserInfo")：定义了这个 Servlet 处理的 URL 路径。
doGet() / doPost()：根据请求方法（GET/POST）来调用不同的处理方法。
resp.setContentType("application/json;charset=UTF-8")：告诉浏览器，我返回的是 JSON 数据，并使用 UTF-8 编码，防止中文乱码。
resp.getWriter()：获取输出流，用于将数据写回给浏览器。

前端实现 (jQuery)

创建一个 HTML 页面，在其中使用 jQuery 发送 AJAX 请求。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 调用 Java Servlet</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>用户信息查询</h1>
    <input type="text" id="userIdInput" placeholder="请输入用户ID ( 123)">
    <button id="queryBtn">查询</button>
    <hr>
    <div id="resultArea">
        <p>结果将显示在这里...</p>
    </div>
    <script>
        $(document).ready(function() {
            // 当查询按钮被点击时
            $("#queryBtn").on("click", function() {
                // 1. 获取输入框的值
                var userId = $("#userIdInput").val();
                // 2. 使用 jQuery 的 $.ajax 发送请求
                $.ajax({
                    url: "/api/getUserInfo", // 后端 Servlet 的 URL
                    type: "GET",             // 请求方法
                    data: {                 // 发送到服务器的数据
                        "userId": userId
                    },
                    dataType: "json",      // 预期服务器返回的数据类型
                    success: function(response) {
                        // 请求成功后执行的回调函数
                        // response 就是后端返回的 JSON 对象
                        console.log("请求成功:", response);
                        if (response.code === 200) {
                            var user = response.data;
                            var html = "<p><strong>用户ID:</strong> " + user.id + "</p>" +
                                       "<p><strong>姓名:</strong> " + user.name + "</p>" +
                                       "<p><strong>年龄:</strong> " + user.age + "</p>";
                            $("#resultArea").html(html);
                        } else {
                            $("#resultArea").html("<p style='color: red;'>查询失败: " + response.message + "</p>");
                        }
                    },
                    error: function(xhr, status, error) {
                        // 请求失败后执行的回调函数
                        console.error("请求失败:", status, error);
                        $("#resultArea").html("<p style='color: red;'>网络错误，请稍后重试。</p>");
                    }
                });
            });
        });
    </script>
</body>
</html>

关键点：

$.ajax()：jQuery 发送 AJAX 请求的核心方法。
url: 请求的目标地址。
type: 请求方法 (GET/POST)。
data: 一个对象，包含要发送的键值对参数。
dataType: 告诉 jQuery 如何解析返回的数据，设置为 json，jQuery 会自动将 JSON 字符串解析成 JavaScript 对象。
success: 请求成功时的回调函数，参数 response 就是服务器返回的数据。
error: 请求失败（如 404, 500 错误）时的回调函数。

Spring MVC + jQuery (推荐)

这是目前企业级应用中最主流的方式,Spring MVC 提供了更强大、更便捷的控制器和数据处理能力。

后端实现 (Spring MVC Controller)

不再需要手动处理 HttpServletRequest 和 HttpServletResponse，Spring 会自动注入，并且可以自动将 Java 对象序列化为 JSON。

pom.xml (需要添加依赖)

<!-- Spring MVC -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.23</version>
</dependency>
<!-- Jackson 用于 JSON 转换 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

UserController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.Map;
@Controller // 声明这是一个控制器
public class UserController {
    // @ResponseBody 表示此方法的返回值直接作为 HTTP 响应体返回
    // @GetMapping 处理 GET 请求
    @ResponseBody
    @GetMapping("/api/spring/getUser")
    public Map<String, Object> getUserInfo(@RequestParam("id") String userId) {
        System.out.println("Spring MVC 收到请求，用户ID: " + userId);
        Map<String, Object> result = new HashMap<>();
        Map<String, Object> data = new HashMap<>();
        if ("456".equals(userId)) {
            data.put("id", "456");
            data.put("name", "李四");
            data.put("age", 25);
        } else {
            data.put("id", null);
            data.put("name", "未知用户 (Spring MVC)");
            data.put("age", 0);
        }
        result.put("code", 200);
        result.put("message", "success");
        result.put("data", data);
        // Spring MVC 会自动使用 Jackson 库将这个 Map 对象转换为 JSON 字符串并返回
        return result;
    }
}

关键点：

@Controller: 声明这是一个 Spring MVC 的控制器。
@ResponseBody: 告诉 Spring，这个方法的返回值不是要跳转到某个视图，而是直接写入到 HTTP 响应体中，通常配合 @RestController 使用（@RestController = @Controller + @ResponseBody）。
@GetMapping: 定义一个处理 GET 请求的方法，括号里的值是 URL 路径。
@RequestParam: 将 URL 中的参数绑定到方法的变量上。
自动 JSON 序列化：当方法返回一个对象或集合时，Spring 配置了 Jackson 库（通常默认配置），它会自动将对象转换为 JSON 字符串，并设置 Content-Type 为 application/json，这比手动拼接 JSON 字符串方便得多。

前端实现 (jQuery)

前端代码几乎和方式一完全一样,只需要修改 url 即可。

index_spring.html

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="userIdInputSpring" placeholder="请输入用户ID ( 456)">
<button id="queryBtnSpring">查询 (Spring MVC)</button>
<hr>
<div id="resultAreaSpring">
    <p>结果将显示在这里...</p>
</div>
<script>
    $(document).ready(function() {
        $("#queryBtnSpring").on("click", function() {
            var userId = $("#userIdInputSpring").val();
            $.ajax({
                url: "/api/spring/getUser", // 修改为 Spring MVC 的 URL
                type: "GET",
                data: { "id": userId },
                dataType: "json",
                success: function(response) {
                    console.log("请求成功:", response);
                    if (response.code === 200) {
                        var user = response.data;
                        var html = "<p><strong>用户ID:</strong> " + user.id + "</p>" +
                                   "<p><strong>姓名:</strong> " + user.name + "</p>" +
                                   "<p><strong>年龄:</strong> " + user.age + "</p>";
                        $("#resultAreaSpring").html(html);
                    } else {
                        $("#resultAreaSpring").html("<p style='color: red;'>查询失败: " + response.message + "</p>");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("请求失败:", status, error);
                    $("#resultAreaSpring").html("<p style='color: red;'>网络错误，请稍后重试。</p>");
                }
            });
        });
    });
</script>

Spring Boot + jQuery (现代首选)

Spring Boot 是对 Spring 的进一步封装，旨在简化配置，让开发者能更专注于业务代码，它与 Spring MVC 的后端实现几乎一样，但项目配置和启动方式更简单。

后端实现 (Spring Boot Controller)

后端代码和 Spring MVC 完全一样！UserController.java 文件可以直接复用。

pom.xml (Spring Boot 项目)

<!-- Spring Boot Starter Web，它已经包含了 Spring MVC 和 Jackson -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

启动类

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);
    }
}

关键点：

只需一个 @SpringBootApplication 注解的启动类，就可以运行一个内嵌了 Tomcat 的 Web 应用。
后端 Controller 的代码无需任何改动，体现了 Spring Boot 的“约定优于配置”原则。

前端实现 (jQuery)

前端代码也和 Spring MVC 方式完全一样。

总结与对比

特性	传统 Servlet	Spring MVC	Spring Boot
配置复杂度	高 (需要手动配置 web.xml, Servlet 等)	中 (需要配置 DispatcherServlet 等)	低 (自动配置，几乎零配置)
开发效率	低 (代码繁琐)	中 (注解驱动，代码简洁)	高 (快速启动，专注业务)
JSON 处理	手动拼接或引入第三方库	自动 (Jackson/Gson)	自动 (Jackson/Gson)
适用场景	学习原理、简单项目	企业级 Web 应用	所有现代 Java Web 应用，尤其是微服务
核心优势	原理清晰	功能强大、生态成熟	快速、便捷、现代化

建议：

初学者：从 Servlet 开始，理解 HTTP 请求/响应的完整流程。
企业开发：直接使用 Spring Boot，它是目前的事实标准，如果你已经在使用 Spring，Spring MVC 是你的不二之选。

jquery 调用java后台方法

核心概念

实现方式

传统 Servlet + jQuery

后端实现 (Servlet)

前端实现 (jQuery)

Spring MVC + jQuery (推荐)

后端实现 (Spring MVC Controller)

前端实现 (jQuery)

Spring Boot + jQuery (现代首选)

后端实现 (Spring Boot Controller)

前端实现 (jQuery)

总结与对比

99ANYc3cd6

HTC One如何一键获取root权限？

Sublime Text下Python环境如何配置？

Python for in range循环如何高效使用？

Python for in 循环如何获取当前元素索引？

SpringMVC视频教程从哪开始学？

Python行为树如何实现高效决策控制？

Java应用与Web开发有何关联？

Java Integer转Byte为何会失真？

Python如何用autopy实现自动化操作？

Ubuntu 14.04如何安装Java？

SolidWorks 2010安装教程步骤详解是什么？

Dreamweaver CS6视频教程从哪里学起？

Python 3 UserWarning如何解决？

Python临时文件名如何生成与管理？

java printstacktrace

acmecadconverter安装教程在哪找？

jquery 调用java后台方法

核心概念

实现方式

传统 Servlet + jQuery

后端实现 (Servlet)

前端实现 (jQuery)

Spring MVC + jQuery (推荐)

后端实现 (Spring MVC Controller)

前端实现 (jQuery)

Spring Boot + jQuery (现代首选)

后端实现 (Spring Boot Controller)

前端实现 (jQuery)

总结与对比

相关推荐

Python行为树如何实现高效决策控制？