PugJS表单action自动添加问号问题求助

问题原因 #

浏览器处理表单提交时，若表单内没有任何表单控件（如input、textarea等），哪怕指定了DELETE方法，提交后也会在URL末尾自动加问号——这是浏览器的默认行为，因为它预期要传递表单数据，但实际无数据可传。

解决方案 #

方案1：给表单加一个隐藏空字段 #

在Pug表单里添加一个隐藏的input，让浏览器检测到存在表单控件，就不会额外添加问号：

form(method="DELETE", action='/shortener/'+ item._id)
    input(type="hidden", name="_placeholder")
    button.btn.btn-delete(type="submit") Delete

方案2：改用fetch API发送DELETE请求（推荐） #

直接用fetch提交请求，绕开表单提交的浏览器默认行为，灵活性更高：

// 给删除按钮绑定点击事件
document.querySelector('.btn-delete').addEventListener('click', async (e) => {
  e.preventDefault(); // 阻止默认表单提交行为
  const itemId = '#{item._id}'; // 替换为实际的item._id值
  try {
    const response = await fetch(`/shortener/${itemId}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        // 若项目启用CSRF防护，需添加对应请求头，示例：
        // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
      }
    });
    if (response.ok) {
      // 请求成功后的操作，比如刷新页面或移除对应DOM元素
      window.location.reload();
    }
  } catch (err) {
    console.error('删除操作失败:', err);
  }
});

对应的Pug代码可以改成普通按钮（无需包裹在表单里）：

button.btn.btn-delete(type="button") Delete

补充说明 #

你的后端destroy接口逻辑是正常的，只要请求能正确携带id参数就能执行删除操作。两种方案都能解决URL末尾加问号的问题，根据项目实际场景选择即可。

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