点击按钮传递EJS页面ticket.ticketNumber至POST请求时遇未定义错误

我有一个EJS页面用来展示工单数据，需求是点击Resolve按钮时发送对应的ticket.ticketNumber到后端。目前XMLHttpRequest能正常获取req.body，但传递参数时出现报错：

Uncaught ReferenceError: ticket is not defined
    at HTMLButtonElement.onclick

相关代码片段 #

EJS文件代码

<%- include("partials/header.ejs") %>

<h1>Please address the following tickets according to their urgency</h1>

<div class="box">
  <% openTickets.forEach(function(ticket){ %>
  <div class="item">
    <form class="tickets-form" action="" method="">
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Ticket Number:</span
        >
        <%= ticket.ticketNumber %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Employee Name:</span
        >
        <%= ticket.employeeName %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Department:</span
        >
        <%= ticket.departmentName %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Urgency:</span
        >
        <%= ticket.urgencyLevel %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Incident Description:</span
        >
        <%= ticket.incidentDescp %>
      </p>
    </form>
    <button
      type="Submit"
      class="btn btn-primary"
      onclick="resolve(ticket.ticketNumber)"
    >
      Resolve
    </button>
  </div>
  <% }); %>
</div>

<script src="resolve.js"></script>

<%- include("partials/footer.ejs") %>

resolve.js代码

function resolve(ticketNum) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/resolve", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  data = {
    ticketNumber: ticketNum,
  };
  xhttp.send(JSON.stringify(data));
}

解决建议 #

报错原因是：onclick="resolve(ticket.ticketNumber)"中的ticket是EJS在服务器端渲染时的变量，页面渲染完成后，浏览器执行JS代码时找不到这个ticket对象——前端环境并没有定义它。

有两种可行的修复方案：

方案1：直接输出EJS变量到onclick参数中

修改按钮的onclick属性，让EJS把ticket.ticketNumber的实际值直接渲染到代码里：

<button
  type="Submit"
  class="btn btn-primary"
  onclick="resolve(<%= ticket.ticketNumber %>)"
>
  Resolve
</button>

如果工单编号是字符串类型（比如格式为TKT-001），需要给值加上引号，避免被浏览器当成变量：

<button
  type="Submit"
  class="btn btn-primary"
  onclick="resolve('<%= ticket.ticketNumber %>')"
>
  Resolve
</button>

方案2：使用数据属性+事件监听（推荐）

这种方法分离HTML和JS代码，更符合现代前端开发规范：

1. 修改按钮，添加data-ticket-number属性存储工单编号：

<button
  type="Submit"
  class="btn btn-primary resolve-btn"
  data-ticket-number="<%= ticket.ticketNumber %>"
>
  Resolve
</button>

2. 更新resolve.js，通过事件监听获取数据属性的值：

document.addEventListener('DOMContentLoaded', function() {
  // 给所有Resolve按钮绑定点击事件
  document.querySelectorAll('.resolve-btn').forEach(button => {
    button.addEventListener('click', function() {
      const ticketNum = this.dataset.ticketNumber;
      var xhttp = new XMLHttpRequest();
      xhttp.open("POST", "/resolve", true);
      xhttp.setRequestHeader("Content-type", "application/json");
      const data = {
        ticketNumber: ticketNum,
      };
      xhttp.send(JSON.stringify(data));
    });
  });
});

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