如何将Ajax GET获取的用户对象传至EJS生成卡片？是否适用jQuery data方法？

首先明确一点：jQuery的data()方法没办法直接实现把user对象传递给EJS并让EJS在客户端构建卡片——因为EJS是服务器端模板引擎，页面加载时就已经完成了编译渲染，客户端的jQuery无法触发EJS的模板渲染逻辑。不过我们有更合适的方案来解决你“避免拼接复杂HTML字符串”的需求，分两种场景来说：

场景1：可以在服务器端提前获取用户数据 #

这是最推荐的方案，完全用EJS在服务器端渲染所有卡片，不需要客户端拼接HTML：

服务器端（以Express为例） #

先在路由里获取用户数据，把它传给EJS模板：

app.get('/your-page', (req, res) => {
  // 调用API获取用户数据
  fetch('/api/user/all')
    .then(apiRes => apiRes.json())
    .then(users => {
      // 将users数组传给EJS模板
      res.render('your-template', { users: users });
    })
    .catch(err => console.error(err));
});

EJS模板 #

直接在模板里循环渲染卡片，结构清晰易维护：

<div class="row">
  <div class="card-container align-items-left">
    <div class="card-deck" id="userList">
      <% // 遍历users数组渲染每个卡片 %>
      <% users.forEach(user => { %>
        <div class="col-md-auto mb-4">
          <div class="card matches mx-auto" style="width: 18rem; height: 24rem;">
            <div class="card-body">
              <h5 class="card-title"><%= user.username %></h5>
              <p class="card-text"><%= user.jobTitle %></p>
              <p class="card-text"><%= user.city %></p>
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  </div>
</div>

这种方式完全规避了客户端拼接HTML的麻烦，筛选功能可以通过服务器端参数实现，或者后续用jQuery操作已渲染的DOM元素。

场景2：必须用Ajax异步加载用户数据 #

如果是页面加载后再动态获取数据，我们可以用客户端模板来维护卡片结构，同时结合data()方法辅助筛选：

步骤1：定义EJS客户端模板 #

在HTML里添加一个模板片段（需要先引入EJS客户端库：<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.9/ejs.min.js"></script>）：

<!-- 隐藏的模板，用来渲染单个用户卡片 -->
<script type="text/template" id="userCardTemplate">
  <div class="col-md-auto mb-4">
    <div class="card matches mx-auto" style="width: 18rem; height: 24rem;">
      <div class="card-body">
        <h5 class="card-title"><%= username %></h5>
        <p class="card-text"><%= jobTitle %></p>
        <p class="card-text"><%= city %></p>
      </div>
    </div>
  </div>
</script>

步骤2：Ajax获取数据并渲染 #

用EJS客户端版渲染模板，同时把user对象存在DOM元素上方便后续筛选：

$(document).ready(function() {
  $.getJSON('/api/user/all')
  .then(data => {
    const template = $('#userCardTemplate').html();
    data.forEach(user => {
      // 用EJS渲染卡片HTML
      const cardHtml = ejs.render(template, user);
      const $cardContainer = $(cardHtml);
      // 把完整的user对象存在DOM元素上
      $cardContainer.data('user', user);
      $('#userList').append($cardContainer);
    });
  });
});

步骤3：用jQuery实现筛选 #

利用之前存在DOM上的user数据，轻松实现筛选：

// 示例：根据城市筛选
$('#cityFilterInput').on('input', function() {
  const filterValue = $(this).val().toLowerCase();
  $('#userList .col-md-auto').each(function() {
    const user = $(this).data('user');
    // 根据城市判断是否显示
    const isMatch = user.city.toLowerCase().includes(filterValue);
    $(this).toggle(isMatch);
  });
});

总结一下：data()方法的作用是在DOM元素上存储数据，方便后续操作（比如筛选），但不能帮你在客户端调用EJS渲染模板。如果想维护EJS风格的卡片结构，要么在服务器端提前渲染，要么用EJS客户端版来做客户端模板渲染。

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