Django编辑职位页面DELETE触发GET刷新问题排查与解决

问题核心原因 #

编辑页面触发删除操作的元素未阻止默认DOM行为，导致发送DELETE请求后，同时触发了页面跳转/表单提交的GET请求，最终造成页面刷新丢失输入内容：

• 若使用<a>标签触发删除，默认的跳转行为（向当前页面发送GET）会在fetch请求后执行
• 若删除按钮包裹在<form>标签内且未指定type="button"，点击时会默认提交表单（若表单未设置method则默认GET）
• 新增页面的删除按钮大概率已通过按钮类型或事件处理规避了默认行为，因此无此问题

代码排查点 #

前端删除元素示例（错误写法） #

<!-- 错误1：<a>标签未阻止跳转 -->
<a class="delete-duty" data-id="{{ duty.id }}">删除职责</a>

<!-- 错误2：form内按钮未指定type，默认提交表单 -->
<form method="POST">
  <button class="delete-offer" data-id="{{ offer.id }}">删除福利</button>
</form>

请求日志验证 #

查看Network日志会发现：DELETE请求完成后，立刻出现当前编辑页面的GET请求，这就是页面刷新的直接证据。

解决方法 #

方法1：在事件处理中阻止默认行为 #

给删除操作的点击事件添加event.preventDefault()，阻断默认行为：

document.querySelectorAll('.delete-duty, .delete-offer').forEach(el => {
  el.addEventListener('click', async (e) => {
    // 优先阻止默认行为
    e.preventDefault();
    const itemId = e.target.dataset.id;
    const url = e.target.classList.contains('delete-duty') 
      ? `/duties/${itemId}/delete/` 
      : `/offers/${itemId}/delete/`;

    // 发送DELETE请求（需携带Django CSRF令牌）
    const response = await fetch(url, {
      method: 'DELETE',
      headers: {
        'X-CSRFToken': getCookie('csrftoken')
      }
    });

    if (response.ok) {
      // 删除页面上对应的DOM元素
      e.target.closest('.dynamic-item').remove();
    }
  });
});

// 辅助函数：获取Django CSRF令牌
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

方法2：修改元素类型规避默认行为 #

• 将<a>标签替换为普通按钮，并指定type="button"（若在form内必须加）：

<button type="button" class="delete-duty" data-id="{{ duty.id }}">删除职责</button>

• 若必须保留<a>标签，设置href="javascript:void(0)"替代#，避免触发跳转：

<a href="javascript:void(0)" class="delete-offer" data-id="{{ offer.id }}">删除福利</a>

方法3：调整DOM结构 #

将删除按钮移出<form>标签范围，避免触发表单默认提交行为。

验证步骤 #

1. 点击删除按钮时，查看浏览器Network面板，确认DELETE请求后无多余GET请求
2. 检查控制台是否有JS错误，确保CSRF令牌正确传递

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