Теперь у меня есть отдельный скрипт, который использует jquery, который вызывает данные из API

 function sendRequest() {

        $.ajax({
            url: "http://localhost:3002/api/people",
            type: "get", //send it through get method
            data: { 
                filters
            },
            success: function(response) {

               console.log("Response :" , response)
              //Do Something    
            },
            error: function(xhr) {
              //Do Something to handle error
            }
          });
    }

Теперь у меня есть HTML, который вызывает скрипт

 <div class="item col-lg-4 grid-group-item list-group-item mh-animate">
                              <div class="vehicle-wrap">
                                <div class="v-image">
                                  <div class="v-special"><i class="fas fa-star"></i> Special</div>
                                  <img class="group list-group-image img-fluid" src="" alt="" />
                                </div>
                                <div class="v-info">
                                  <h4 class="list-group-item-heading"><a href=""> 2019 Ford F-150 XLT </a></h4>
                                  <div class="v-info-details">
                                    <div class="v-details">

                                      <ul>
                                        <li><strong>Body Style: </strong></li>
                                        <li><strong>Model Code: </strong></li>
                                        <li><strong>Engine: </strong></li>
                                        <li><strong>Drive Type: </strong></li>
                                        <li><strong>Transmission: </strong></li>
                                        <li><strong>Ext. Color: </strong></li>
                                        <li><strong>Int. Color: </strong></li>
                                        <li><strong>MPG: </strong>19&nbsp;City&nbsp;/&nbsp;25&nbsp;Hwy</li>
                                        <li class="vinDisplay"><strong>VIN #: </strong><span></span></li>
                                        <li><strong>Stock #: </strong></li>
                                        </li>
                                      </ul>

                                    </div>

Я мог бы даже регистрировать данные, когда страница загружается

https://imgur.com/a/EQzDsMv

Теперь, как я собираюсь представить эти данные из запроса в HTML? Нужен ли мне движок шаблонов, как Nunjucks? потому что я привык к угловым и другим фреймворкам, я новичок в использовании jquery. Любая идея?

1
Mr. Mark Tawin

2 ответа

$(function() {
  var ajaxData = '<div class="content"><p>content</p></div>';

  setTimeout(function() {
    $('.container').html(ajaxData);
  }, 2000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

Я моделировал асинхронный запрос ajax, а затем динамически вставлял фрагмент html.

Из того, что я могу понять, вы спрашиваете, как редактировать HTML с помощью jQuery.

Если так, то вы можете использовать

$("#elementIdGoesHere").html(dataGoesHere)

если вы выбираете по ID и

$(".elementClassGoesHere").html(dataGoesHere)

если вы выбираете по имени класса.

58585055