如何通过按钮触发的POST请求传递movie.Title与movie.Poster数据？

没问题，我来帮你搞定这个需求！想要点击按钮时把movie.Title和movie.Poster通过POST请求发送到/results，又不想用可见的input元素，这里有两种实用的实现方式：

方法1：使用隐藏表单字段（最直接，无需额外JS） #

HTML表单提交时，表单内的所有控件（包括隐藏类型）都会自动被携带到请求中。你可以在form里添加两个type="hidden"的input，把电影数据存进去，用户点击提交按钮时数据就会一并发送：

<% parsedData["Search"].forEach(function(movie){ %>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="<%= movie.Poster %>" alt="<%= movie.Title %> Poster">
  <div class="card-body">
    <h5 class="card-title"><%= movie.Title %> </h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <form action="/results" method="POST">
      <!-- 隐藏字段存储电影数据，用户看不到但表单会提交 -->
      <input type="hidden" name="movieTitle" value="<%= movie.Title %>">
      <input type="hidden" name="moviePoster" value="<%= movie.Poster %>">
      <button class="btn btn-primary btn-sm" type="submit">Add</button>
    </form>
    <a href="#" class="btn btn-primary btn-sm">Go somewhere</a>
  </div>
</div>
<% }); %>

后端处理时，你就能通过req.body.movieTitle和req.body.moviePoster拿到对应的数据了。

方法2：使用JavaScript发送POST请求（无表单依赖） #

如果你完全不想依赖表单元素，可以给按钮绑定点击事件，用fetch API直接发送POST请求：

<% parsedData["Search"].forEach(function(movie){ %>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="<%= movie.Poster %>" alt="<%= movie.Title %> Poster">
  <div class="card-body">
    <h5 class="card-title"><%= movie.Title %> </h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <!-- 用data属性把电影数据存在按钮上 -->
    <button class="btn btn-primary btn-sm add-movie-btn" 
            data-title="<%= movie.Title %>" 
            data-poster="<%= movie.Poster %>">
      Add
    </button>
    <a href="#" class="btn btn-primary btn-sm">Go somewhere</a>
  </div>
</div>
<% }); %>

<!-- 在页面底部添加JS逻辑 -->
<script>
// 给所有"添加"按钮绑定点击事件
document.querySelectorAll('.add-movie-btn').forEach(btn => {
  btn.addEventListener('click', async function() {
    // 从按钮的data属性中取出电影数据
    const movieInfo = {
      title: this.dataset.title,
      poster: this.dataset.poster
    };
    
    try {
      // 发送POST请求到/results接口
      const response = await fetch('/results', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // 如果后端用了Express，记得提前配置app.use(express.json())
        },
        body: JSON.stringify(movieInfo)
      });
      
      if (response.ok) {
        // 请求成功后的自定义操作，比如提示用户或者跳转页面
        console.log('电影数据已成功提交');
      } else {
        console.error('提交失败，请重试');
      }
    } catch (error) {
      console.error('请求出错:', error);
    }
  });
});
</script>

这种方法需要后端支持接收JSON格式的数据，之后就能通过req.body.title和req.body.poster获取到传递的电影信息了。

两种方法各有优势：方法1适合简单场景，不用写额外JS；方法2更灵活，适合需要自定义请求逻辑的场景，你可以根据自己的需求选择~

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