отправить данные из ajax GET в файл ejs - PullRequest
Новая
       17

отправить данные из ajax GET в файл ejs

0 голосов
/ 09 апреля 2019

Я получаю некоторые данные пользователя с помощью вызова GET ajax и хочу отобразить каждого пользователя на загрузочной карточке , чтобы я мог отфильтровать их на странице с помощью jQuery.

В настоящее время я получаю данные, перебираю каждого пользователя и добавляю некоторые элементы карты в <div class="card-deck"></div>:

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);
            });
        })
})

ejs: 

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

Это работает, но в построении карт будет много html, поэтому я бы предпочел отправить весь пользовательский объект (ниже этоuser) в файл .ejs, чтобы я мог собрать карту там: 

<div class="row">
    <div class="card-container align-items-left">
        <div class="card-deck" id="userList">

          <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>

Это задание для метода jQuery data ?

Ответы [ 2 ]

1 голос
/ 09 апреля 2019

Вам необходимо реализовать конечную точку, которая выбирает информацию о пользователе и формирует шаблон для вашего div-элемента userList и отправляет данные обратно в виде простой 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>
 <% } %>
0 голосов
/ 09 апреля 2019

EJS - это код на стороне сервера.

Если вы хотите сгенерировать свою HTML-серверную часть вместо изменения клиентской DOM, замените getJSON на ajax вызов (dataType: "html") и измените /api/user/all на конечную точку (которая у вас будет) создать), который получает данные и вставляет их в шаблон EJS.

...