Spring Boot应用中HTML绑定的JS代码点击按钮不执行如何解决？

两个弹窗都不触发的核心原因是JS代码在执行到状态判断逻辑前就已抛出异常，常见原因及修复方案如下：

1. 静态资源路径配置错误 #

Spring Boot默认会扫描src/main/resources/static目录下的静态资源，是最常见的错误点：

• 确保send.js放在static目录下，推荐按资源类型建子目录存储，比如static/js/send.js
• 检查application配置文件中是否自定义了静态资源扫描路径，如果配置了spring.web.resources.static-locations，需要确保包含classpath:/static/路径
• 若IDEA无法识别JS文件，右键static目录，选择Mark Directory as → Resources Root即可解决

2. HTML中JS引入错误 #

• 引入路径需要和实际存储路径匹配，比如JS放在static/js/send.js，引入写法应为：

<script src="/js/send.js"></script>

• 将JS引入标签放在</body>闭合标签之前，确保DOM元素加载完成后再加载JS，避免获取输入框元素时返回null报错

3. 按钮事件绑定错误 #

检查提交按钮的onclick属性，确保函数名拼写完全一致，无大小写错误：

<button onclick="send()">提交代码片段</button>

4. 同步XHR被浏览器拦截 #

你当前代码中xhr.open第三个参数为false，代表发送同步XHR请求，现代浏览器普遍会拦截主线程的同步请求，直接抛出异常终止代码执行，导致后续状态判断逻辑完全不运行，需要改成异步请求：

function send() {
    let object = {
        "code": document.getElementById("code_snippet").value
    };
    let json = JSON.stringify(object);
    let xhr = new XMLHttpRequest();
    // 第三个参数改为true，开启异步请求
    xhr.open("POST", '/api/code/new', true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    // 用onload回调处理请求结果
    xhr.onload = function() {
        if (xhr.status == 200) {
            alert("Success!");
        } else {
            alert("Something went wrong!");
        }
    };
    // 新增网络错误处理
    xhr.onerror = function() {
        alert("请求发送失败，请检查接口地址");
    };
    xhr.send(json);
}

快速排查技巧 #

按下F12打开浏览器开发者控制台，点击提交按钮后查看控制台报错信息，可直接定位具体问题：

• 报send is not defined：JS文件未加载成功，检查路径配置
• 报Cannot read properties of null (reading 'value')：JS加载时输入框元素未渲染，调整JS引入位置
• 报Failed to execute 'send' on 'XMLHttpRequest'：同步请求被拦截，按上述方案改成异步即可

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