JSP按钮点击调用Java方法不刷新页面，需Servlet/AJAX实现

嘿，我来帮你搞定这个无刷新调用Java方法的问题！你现在的痛点是点击按钮会整页刷新，想要用Servlet+AJAX实现异步请求，同时还能触发对应的JS函数对吧？别担心，我从0开始一步步教你，毕竟你说没接触过这俩技术，我尽量讲得直白~

Servlet就是前端和你的Java方法之间的桥梁——前端发请求过来，它判断要调用哪个方法，执行完再把结果回给前端。

先写Servlet代码（记得放到你的Web项目的Java源码目录里，比如Maven项目的src/main/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;

@WebServlet("/MyServlet") // 这个注解让Servlet能被访问，路径就是/MyServlet
public class MyServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置返回内容的编码，避免乱码
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        
        // 从前端请求里拿到要调用的方法标识
        String action = request.getParameter("action");
        
        // 根据标识调用对应的Java方法，这里写你的业务逻辑
        String result = "";
        if ("method1".equals(action)) {
            result = this.callMethod1();
        } else if ("method2".equals(action)) {
            result = this.callMethod2();
        } else if ("method3".equals(action)) {
            result = this.callMethod3();
        }
        
        // 把结果返回给前端
        out.print(result);
        out.flush();
        out.close();
    }
    
    // 你的三个Java方法，替换成你自己的业务逻辑就行
    private String callMethod1() {
        // 比如操作数据库、计算、读取文件之类的
        return "按钮1对应的Java方法执行完成啦！";
    }
    
    private String callMethod2() {
        return "按钮2对应的Java方法搞定了！";
    }
    
    private String callMethod3() {
        return "按钮3对应的Java方法执行完毕~";
    }
}

原来的按钮应该是用了表单提交或者跳转链接，所以才会刷新页面。现在咱们换成用JavaScript发送AJAX请求——这玩意儿是异步的，就是“偷偷”和服务器通信，页面不用刷新就能拿到结果，还能顺便触发你要的JS函数。

修改后的JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无刷新按钮示例</title>
<script type="text/javascript">
    // 封装一个通用的AJAX请求函数，省得每个按钮写重复代码
    function sendAjax(action) {
        // 创建AJAX请求对象（兼容不同浏览器）
        let xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            // 兼容IE6及更早版本
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        
        // 监听请求状态变化，拿到服务器返回的结果
        xhr.onreadystatechange = function() {
            // readyState=4表示请求完成，status=200表示请求成功
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 这里可以处理服务器返回的结果，比如弹提示、更新页面内容
                alert("服务器说：" + xhr.responseText);
                // 也可以把结果放到页面的某个元素里，比如下面的result div
                // document.getElementById("result").innerHTML = xhr.responseText;
            }
        };
        
        // 打开请求：POST方式，路径是咱们刚才写的Servlet路径，true表示异步
        xhr.open("POST", "MyServlet", true);
        // 设置请求头，告诉服务器参数的编码格式
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 发送请求，把要调用的方法标识传过去
        xhr.send("action=" + action);
    }
    
    // 按钮1对应的JS函数，点击时先执行你的JS逻辑，再发AJAX请求
    function handleButton1() {
        console.log("按钮1被点击啦，执行JS函数~");
        // 这里写你要的JS逻辑，比如改页面样式、做表单验证之类的
        document.body.style.backgroundColor = "#f0f8ff";
        // 调用AJAX请求Java方法1
        sendAjax("method1");
    }
    
    // 按钮2对应的JS函数
    function handleButton2() {
        console.log("按钮2被点击，执行JS函数~");
        document.body.style.backgroundColor = "#ffe4e1";
        sendAjax("method2");
    }
    
    // 按钮3对应的JS函数
    function handleButton3() {
        console.log("按钮3被点击，执行JS函数~");
        document.body.style.backgroundColor = "#f0fff0";
        sendAjax("method3");
    }
</script>
</head>
<body>
    <!-- 按钮绑定对应的点击事件，不用表单，直接调用JS函数 -->
    <button onclick="handleButton1()">按钮1</button>
    <button onclick="handleButton2()">按钮2</button>
    <button onclick="handleButton3()">按钮3</button>
    
    <!-- 可选：用来显示服务器返回的结果 -->
    <div id="result" style="margin-top:20px;"></div>
</body>
</html>

• 为什么原来会刷新？因为原来的按钮可能在<form>里，点击会提交表单；或者用了<a>标签跳转，这些都会触发整页刷新。现在用AJAX是异步请求，不会触发页面跳转/刷新。
• Servlet的作用：接收前端的AJAX请求，分发到对应的Java方法，再把结果返回给前端。
• AJAX的核心：异步发送HTTP请求，页面保持正常交互，等服务器返回结果后再动态更新页面内容。

如果你觉得原生AJAX写着麻烦，也可以用jQuery的AJAX，代码会更简洁——比如把上面的sendAjax函数改成这样：

function sendAjax(action) {
    $.post("MyServlet", {action: action}, function(result) {
        alert("服务器说：" + result);
    });
}

不过要记得在JSP的<head>里引入jQuery的脚本（可以下载到本地，或者用CDN链接）：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

1. 把Servlet放到你的Web项目里，确保项目能正常编译。
2. 把修改后的JSP放到Web资源目录（比如Maven的src/main/webapp）。
3. 启动Tomcat服务器，访问这个JSP页面，点击按钮试试——页面不会刷新，JS函数的逻辑（比如背景色变化）会生效，还能弹出服务器返回的结果~

内容的提问来源于stack exchange，提问作者psydekick