如何在EJS模板中点击按钮发送PUT请求？是否必须使用表单？

一、修改现有代码实现PUT请求传递id #

HTML原生表单只支持GET和POST方法，要发送PUT请求，咱们有两种实用方案：

方案1：表单+_method隐藏字段（Express生态首选）

如果你用Express框架，可以配合method-override中间件来模拟PUT请求。直接修改你的EJS代码如下：

<% if(user[i].complaint_type === "Bin Full"){ %>
  <form action="/assignCol/<%= user[i].id %>" method="POST">
    <!-- 添加隐藏字段，告诉服务器这是伪装成POST的PUT请求 -->
    <input type="hidden" name="_method" value="PUT">
    <button type="submit" class="btn btn-info" style="margin-left: 630px;">
      Assign collector
    </button>
  </form>
<% } %>

然后在Express后端配置中间件和路由：

const methodOverride = require('method-override');
// 启用method-override，识别表单中的_method字段
app.use(methodOverride('_method'));

// 处理PUT请求的路由，从URL参数中获取id
app.put('/assignCol/:id', (req, res) => {
  const targetId = req.params.id;
  // 这里编写根据id更新数据库的逻辑，例如：
  // Complaint.findByIdAndUpdate(targetId, { assigned: true }, (err, updatedDoc) => { ... })
  res.redirect('/your-target-page'); // 处理完后重定向或返回JSON
});

方案2：用JavaScript的fetch发送PUT请求（无表单，支持异步交互）

要是不想依赖表单，直接给按钮绑定点击事件，用JS发送PUT请求即可，还能实现无刷新页面的交互：

<% if(user[i].complaint_type === "Bin Full"){ %>
  <button onclick="assignCollector(<%= user[i].id %>)" class="btn btn-info" style="margin-left: 630px;">
    Assign collector
  </button>
<% } %>

<script>
function assignCollector(id) {
  fetch(`/assignCol/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      // 如果项目有CSRF防护，记得添加CSRF令牌，示例：
      // 'X-CSRF-Token': '<%= csrfToken %>'
    }
  })
  .then(response => {
    if(response.ok) {
      alert('Collector assigned successfully!');
      window.location.reload(); // 刷新页面更新状态，也可以局部修改DOM
    } else {
      throw new Error('Failed to assign collector');
    }
  })
  .catch(error => console.error('Request error:', error));
}
</script>

后端路由和方案1一致，用app.put('/assignCol/:id', ...)处理即可。

二、EJS里发送POST/GET必须用表单？当然不用！ #

给你列几种常用的非表单请求方式：

• GET请求：

  • 用<a>标签：<a href="/view-details?id=<%= user[i].id %>">查看详情</a>，这是最常见的GET请求方式，点击后直接发送请求。
  • 用fetch/axios：和PUT写法类似，把method设为GET即可，适合需要异步处理响应的场景。

• POST请求：

  • 用fetch/axios发送JSON数据：

    fetch('/submit-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: 123, status: 'processed' })
    })
    .then(res => res.json())
    .then(data => console.log('Response:', data));
    

  • 老式的XMLHttpRequest也能实现，但现在基本被fetch替代了。

最后总结 #

如果你的项目是Express的RESTful架构，方案1的表单+_method字段最省心；要是想要无刷新的交互体验，方案2的JSfetch方式更灵活。发送请求完全没必要局限于表单，根据你的业务需求选择最合适的方式就行～

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