Javascript 将数据从ajax发送到ejs文件

我正在通过一个ajax GET调用检索一些用户数据，并希望在中显示每个用户，以便使用jQuery在页面上过滤这些数据

目前，我获取数据，迭代每个用户，并将一些卡片元素附加到

：

jQuery:

$(document).ready(function() {
    $.getJSON('/api/user/all')
        .then(data => {
            $.each(data, function (i, user) {
                var userCard = '<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>";

                $('#userList').append(userCard);
            });
        })
})

<div class="row">
    <div class="card-container align-items-left">
        <div class="card-deck" id="userList">
            // cards go here ... 
        </div>
    </div>
</div>

---

这是一个方法的工作吗

EJS是服务器端代码

---

如果您希望生成HTML服务器端而不是修改DOM客户端，那么将

getJSON

替换为

ajax

调用（使用

dataType:“HTML”

），并将

/api/user/all

更改为端点（必须创建该端点）获取数据并将其插入EJS模板。

EJS是服务器端代码

---

如果您希望生成HTML服务器端而不是修改DOM客户端，那么将

getJSON

替换为

ajax

调用（使用

dataType:“HTML”

），并将

/api/user/all

更改为端点（必须创建该端点）获取数据并将其插入EJS模板。

您需要实现一个端点，该端点获取用户信息并为userList div形成模板，并将数据作为普通html字符串发送回

必须通过

ajax

调用从客户端调用该端点，并将响应html设置为div

服务器

    app.get('/api/user/all',(req, res){
   //get user data
   const data = [{username:"john",jobTitle:"a",city:"b"},{username:"doe",jobTitle:"a",city:"b"}];

   res.render('userTemplate', {users:data} ,function(err, html) {
      res.send(html);
  });

客户端

$.ajax({
  url: "/api/user/all",
  cache: false,
  success: function(html){
    $("#userList").innerHtml(html);
  }
});

userTemplate.ejs

<% for(var i=0; i < users.length; i++) { %>
    <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"><%= users[i].username %></h5>
                <p class="card-text"><%= users[i].jobTitle %></p>
                <p class="card-text"><%= users[i].city %></p>
            </div>
        </div>
    </div>
 <% } %>

您需要实现一个端点，该端点获取用户信息并为您的userList div形成模板，并将数据作为普通html字符串发送回

必须通过

ajax

调用从客户端调用该端点，并将响应html设置为div

服务器

    app.get('/api/user/all',(req, res){
   //get user data
   const data = [{username:"john",jobTitle:"a",city:"b"},{username:"doe",jobTitle:"a",city:"b"}];

   res.render('userTemplate', {users:data} ,function(err, html) {
      res.send(html);
  });

客户端

$.ajax({
  url: "/api/user/all",
  cache: false,
  success: function(html){
    $("#userList").innerHtml(html);
  }
});

userTemplate.ejs

<% for(var i=0; i < users.length; i++) { %>
    <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"><%= users[i].username %></h5>
                <p class="card-text"><%= users[i].jobTitle %></p>
                <p class="card-text"><%= users[i].city %></p>
            </div>
        </div>
    </div>
 <% } %>