Spring Boot应用表单提交异常及按钮点击失效问题求助

问题根源分析 #

1. GET请求异常原因：
   尽管当前按钮是type="button"（默认不会触发表单提交），但如果之前按钮是type="submit"，或存在其他触发表单提交的逻辑，浏览器会以默认的GET方式提交表单（form未指定method时默认GET），而后端接口不支持GET方法，因此抛出HttpRequestMethodNotSupportedException。

2. 添加event.preventDefault()后按钮无响应原因：
   JS代码中尝试获取#chatgroup-page元素，但HTML里不存在该ID的元素，导致chatgroupPage为null，执行chatgroupPage.classList.add('hidden')时会抛出TypeError，直接中断整个connect函数的执行，后续页面切换逻辑无法运行，看起来按钮无反应。另外，当前按钮是type="button"，本身没有需要阻止的默认行为，event.preventDefault()属于多余操作。

具体修复步骤 #

1. 移除多余的默认行为阻止 #

删除connect函数中的event.preventDefault();语句，因为type="button"的按钮点击不会触发表单提交，无需阻止默认行为。

2. 修正DOM元素选择错误 #

删除JS中针对不存在的chatgroupPage的操作代码，保留正确的页面切换逻辑：

// 移除这一行：chatgroupPage.classList.add('hidden');
chatPage.classList.remove('hidden');

3. 优化事件监听（可选） #

移除事件监听的第三个参数true，默认使用事件冒泡阶段即可，除非有特殊的捕获需求：

document.getElementById('start-chatting-button').addEventListener('click', connect);

4. 防止表单意外提交（可选） #

如果担心表单被误触发提交，可给form添加onsubmit阻止：

<form id="connectButton" name="connectButton" onsubmit="return false;">

修正后的完整JS代码 #

'use strict';

var chatPage = document.querySelector('#chat-page');
var messageForm = document.querySelector('#messageForm');
var messageInput = document.querySelector('#message');
var messageArea = document.querySelector('#messageArea');
var connectingElement = document.querySelector('.connecting');


var stompClient = null;
var username = null;

var colors = [
    '#2196F3', '#32c787', '#00BCD4', '#ff5652',
    '#ffc107', '#ff85af', '#FF9800', '#39bbb0'
];

function connect(event) {
    var username = 'Dhananjai';
    console.log("Inside connect function");
    if(username) {
        console.log("Inside connect function if condition");
        chatPage.classList.remove('hidden');

        // 可恢复注释的WebSocket连接代码
        // var socket = new SockJS('/ws');
        // stompClient = Stomp.over(socket);
        // stompClient.connect({}, onConnected, onError);
    }
}

document.getElementById('start-chatting-button').addEventListener('click', connect);

额外排查建议 #

• 打开浏览器控制台（F12）查看JS错误信息，这是快速定位前端问题的核心手段，之前的TypeError会在控制台明确提示。
• 如果后续需要使用表单提交逻辑，记得给form指定method="POST"，并确保后端接口支持对应的请求方法。

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