点击按钮调用Servlet（禁止表单提交）的实现方法咨询

Hey there! Since you can't wrap your button in a form and need to avoid form submission entirely, here are three reliable ways to trigger a request to your Servlet when the button is clicked:

1. 直接页面跳转（同步请求，简单直观） #

If you don't mind the page refreshing after the request, this is the simplest approach. We'll use JavaScript to redirect the browser directly to your Servlet's URL.

You can either inline the code or wrap it in a function for cleaner code:

内联代码版本： #

<button onclick="window.location.href='/your-servlet-path'"><span>ButtonName</span></button>

封装函数版本： #

<script>
function navigateToServlet() {
    // 替换成你实际的Servlet映射路径（比如 /MyServlet）
    window.location.href = '/your-servlet-mapping-url';
}
</script>
<button onclick="navigateToServlet()"><span>ButtonName</span></button>

说明：这种方式会让页面跳转到Servlet处理后的页面，就像点击普通链接一样，适合需要请求完成后刷新页面的场景。

2. 用Fetch API发起异步请求（无页面刷新） #

如果需要在不刷新页面的情况下和Servlet交互，现代浏览器推荐的Fetch API是绝佳选择。它支持GET/POST等HTTP方法，还能优雅地处理响应和错误。

<script>
function callServletAsync() {
    fetch('/your-servlet-mapping-url', {
        method: 'GET', // 如果你的Servlet用doPost()处理请求，就改成'POST'
        // 如果需要发送POST参数，取消下面的注释
        // headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded',
        // },
        // body: 'username=john&age=30' // URL编码的参数
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`服务器响应状态码：${response.status}`);
        }
        return response.text(); // 如果Servlet返回JSON，就用response.json()
    })
    .then(data => {
        // 处理Servlet返回的数据
        console.log('Servlet响应内容:', data);
        alert('请求成功！');
        // 示例：更新页面部分内容
        // document.getElementById('result').textContent = data;
    })
    .catch(error => {
        // 处理错误（比如网络问题、服务器错误）
        console.error('请求失败:', error);
        alert('哎呀，出问题了，请重试。');
    });
}
</script>
<button onclick="callServletAsync()"><span>ButtonName</span></button>

为什么好用：Fetch在后台发送异步HTTP请求，用户可以停留在当前页面同时完成交互，非常适合需要动态更新内容的UI场景。

3. 原生XMLHttpRequest（兼容旧浏览器） #

如果需要支持IE这类不兼容Fetch的旧浏览器，就用XMLHttpRequest（XHR）。它代码量稍大，但兼容性覆盖几乎所有浏览器。

<script>
function callServletWithXHR() {
    const xhr = new XMLHttpRequest();
    // 发起GET请求（用POST的话就把第一个参数改成'POST'）
    xhr.open('GET', '/your-servlet-mapping-url', true); // true表示异步请求
    
    // 如果是POST请求，取消下面两行注释：
    // xhr.open('POST', '/your-servlet-mapping-url', true);
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    // 处理成功响应
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log('Servlet响应内容:', xhr.responseText);
            alert('请求成功！');
        } else {
            alert(`请求失败，状态码：${xhr.status}`);
        }
    };
    
    // 处理网络错误
    xhr.onerror = function() {
        alert('发生网络错误，请检查连接。');
    };
    
    // 发送请求（POST请求的话把参数放在send()里）
    // xhr.send('username=jane&age=28');
    xhr.send();
}
</script>
<button onclick="callServletWithXHR()"><span>ButtonName</span></button>

说明：XHR存在已久，几乎所有浏览器都支持，如果你需要兼容遗留系统，这个方案很合适。

重要提示： #

• 把/your-servlet-mapping-url替换成你实际的Servlet路径（通过web.xml配置或@WebServlet注解指定）。
• 确保前端使用的HTTP方法（GET/POST）和Servlet中对应的doGet()/doPost()方法匹配。
• GET请求可以直接在URL后拼接参数：/your-servlet-url?param1=value1&param2=value2。

内容的提问来源于stack exchange，提问作者Abdur Razzak Rana