您的按钮定义为typesubmit。
因此，当您单击它时，表单已提交。
为了防止这种默认行为，您需要做几件事：主要思想是为您的表单 submit 事件定义一个处理程序，并使用 Javascript 执行实际的服务器调用。
您可以在different ways 中执行此操作，尽管我认为最好使用事件处理程序来定义所需的行为并尽可能将您的 HTML 代码与 Javascript 分开。
此外，您似乎正在遍历项目列表。
考虑到这两点，考虑以下代码 sn-p：
<script>
// We use the DOMContentLoaded event (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
// but please, register the form event as you consider appropriate
document.addEventListener('DOMContentLoaded', () => {
// Register form submit event handler for every form in your page
const forms = document.querySelectorAll('form');
if (forms) {
forms.forEach(f => {
let action = f.action;
f.addEventListener('submit', (event) => {
// prevent default behavior, i.e., form submission
event.preventDefault();
// perform server side request. you can use several options
// see https://developers.google.com/web/updates/2015/03/introduction-to-fetch, for instance
// For example, let's use fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
fetch(action)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
console.log('Request successfully completed');
})
.catch((error) => {
console.error('There has been a problem while contacting server:', error);
});
});
});
}
});
</script>
事实上，你可以摆脱表格。请考虑一种稍微不同的方法。首先，在迭代您的项目时，生成以下 HTML 块（如果您愿意，可以使用 data 或任何自定义属性来存储当前处理的项目 ID）：
<!-- 'block item' button code-->
<div class="row">
<button type="button" class="btn btn-warning item-button" th:id="${item.itemId}">block item</button>
</div>
现在，以与上述类似的方式，为每个项目按钮注册处理程序：
<script th:inline="javascript">
document.addEventListener('DOMContentLoaded', () => {
// Register handlers for every button
const buttons = document.querySelectorAll('.item-button');
if (buttons) {
buttons.forEach(b => {
b.addEventListener('click', (event) => {
let itemId = b.getAttribute('id');
let link = /*[[@{/items/block/}]]*/ 'link';
// Perform server side request
fetch(link + itemId)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
console.log('Request successfully completed');
})
.catch((error) => {
console.error('There has been a problem while contacting server:', error);
});
});
}
}
});
</script>