Thymeleaf无刷新更新div时其余页面内容消失如何解决

核心错误点 #

• 第一，<button>标签未指定type属性，在form标签内部默认是submit类型：你点击按钮时除了触发updateOutput方法，还会触发表单默认提交行为，直接跳转至/level1-answer接口，而该接口仅返回output div的片段，因此整个页面被替换为仅含output的内容，这是页面其他内容消失的直接原因。
• 第二，updateOutput方法的请求逻辑错误：你发送的是GET请求到不存在的output路径，既没有匹配的后端接口，也没有携带用户输入的SQL参数，根本无法拿到正确的校验结果。
• 第三，使用replaceWith替换整个#output节点，后续如果再次点击run按钮会找不到对应节点，逻辑不严谨。

修复步骤 #

1. 给run按钮添加type="button"，阻止默认表单提交

<button type="button" onclick="updateOutput()" class="btn-secondary mt-4" id="ausfuehrenBtn">run</button>

2. 修改updateOutput方法，发送POST请求到/level1-answer接口，携带表单参数，替换output内容即可

function updateOutput() {
    $.post("/level1-answer", $("form").serialize(), function(fragment) { 
        // 因为后端返回的是完整的#output片段，直接替换整个节点也可，以下写法更稳妥
        $("#output").html($(fragment).html());
    });
}

3. 可选优化：如果需要更灵活的控制，可以调整后端返回的内容为纯校验结果，不需要返回整个output div片段，前端直接把结果塞到output里的span标签即可。

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