HTML前端实现REST PATCH/DELETE请求时获取项目ID的正确方式

结论 #

两种方案都完全合理，只是适用场景不同，没有绝对的最优解，根据你的操作场景选择即可。

方案1：从URL提取项目ID #

适用场景

仅适合在单项目详情页/编辑页执行修改、删除操作的情况，也就是当前页面的URL本身就包含对应项目的ID（比如site.tld/project/44）。

实现方式

不要手动切割字符串，用浏览器原生的URLAPI处理更稳妥，不容易出格式兼容问题：

const currentUrl = new URL(window.location.href)
// 拆分路径段，比如/project/44会拆成['', 'project', '44']
const pathSegs = currentUrl.pathname.split('/')
const projectId = pathSegs[pathSegs.indexOf('project') + 1]

优劣势

• 优点：不需要后端额外传值，前端可以独立处理，页面刷新也不会丢失ID
• 缺点：如果是在项目列表页对单条项目做删除/修改操作，当前页面URL没有对应项目ID，该方案无法使用

方案2：EJS绑定data-*自定义属性 #

适用场景

所有场景都适用，尤其是项目列表页批量操作的场景，是通用性更高的方案。

实现方式

1. 首先在EJS模板里把项目ID绑定到对应DOM元素的自定义属性上：

<!-- 示例：项目列表页遍历渲染所有项目 -->
<% projects.forEach(project => { %>
<div class="project-card" data-project-id="<%= project.id %>">
  <h4><%= project.title %></h4>
  <button class="btn btn-sm btn-primary patch-btn">修改</button>
  <button class="btn btn-sm btn-danger delete-btn">删除</button>
</div>
<% }) %>

2. 前端JS直接从DOM属性取值即可：

// 绑定删除按钮点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 从父级卡片元素拿到项目ID
    const projectId = e.target.closest('.project-card').dataset.projectId
    // 发DELETE请求示例
    fetch(`/project/${projectId}`, {
      method: 'DELETE'
    })
  })
})

优劣势

• 优点：适用性广，不管是列表页还是详情页都能用，数据直接来自服务端渲染，不会出现URL解析错误的问题，还可以同时绑定更多项目相关的自定义属性，无需额外请求接口
• 缺点：仅适用于服务端渲染的页面，纯静态前端页面无法使用

选择建议 #

1. 如果是在单项目详情/编辑页操作，两种方案任选，选你写起来更顺手的即可
2. 如果是在项目列表页操作单条项目，优先选data-*属性方案

额外小提示 #

你当前定义的API有个不符合REST规范的小问题：POST请求是用来创建新资源的，资源ID一般由服务端生成，所以POST接口路径应该是POST site.tld/project不带ID，创建成功后再把生成的ID返回给前端即可。

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