Как передать данные из jquery в html?

Question

Теперь у меня есть отдельный скрипт, который использует 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? Потому что я использую angular и другие фреймворки, я новичок в использовании jquery. Любая идея?

javascript jquery ajax binding nunjucks

1

user11327631 28 Окт 2019 в 05:13

2

Использование .html() или .append() удовлетворит ваши потребности.

–

sugars

28 Окт 2019 в 05:20

Вы можете отправить экзамен, сэр? на основе html

–

user11327631

28 Окт 2019 в 05:31

1

> cause I am use to angular and other Frameworks I am just new on using jquery. Это немного странно. Имхо, jquery устарело. Да, можно использовать nunjucks, но нет способа привязки данных.

–

Aikon Mogwai

28 Окт 2019 в 14:17

Потому что все приложение - это серверная часть, отображается только одна страница приложения, для которой требуется SPA \

–

user11327631

29 Окт 2019 в 08:47

Answer 1

Насколько я понимаю, вы спрашиваете, как редактировать HTML с помощью jQuery.

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

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

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

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

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

1

Brian Nguyen 28 Окт 2019 в 05:29

Можете ли вы опубликовать пример, сэр, но едва ли новичок в jquery

–

user11327631

28 Окт 2019 в 05:32

1

Не редактирую, я хочу загрузить ответ на html

–

user11327631

28 Окт 2019 в 05:32

Предоставленный мной код в основном изменит содержимое HTML. Итак, допустим, HTML - это тег HTML p и у него нет содержимого (ничего между начальным и закрывающим тегами). Затем вы пишете этот код: $ ("p"). Html ("Некоторые случайные данные ..") Если это так, содержимое тега p изменится на строку, поэтому будут отображаться слова "Некоторые случайные данные .."

–

Brian Nguyen

28 Окт 2019 в 07:58

Answer 2

$(function() {
  var ajaxJsonData = [{
      name: 'a',
      value: 'value1'
    },
    {
      name: 'b',
      value: 'value2'
    },
    {
      name: 'c',
      value: 'value3'
    }
  ];

  //var temp = '';
  //for (var i = 0; i < ajaxJsonData.length; i++) {
  //temp += '<div>name: ' + ajaxJsonData[i].name + ',value: ' +      //ajaxJsonData[i].value + '</div>';
  //}

  var value = 'value';
  var $temp = `
  <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: ${value} </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>
  `

  setTimeout(function() {
    $('.container').html($temp);
  }, 2000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

0

sugars 28 Окт 2019 в 06:42

Как насчет данных из ответа ajax? массив объектов json?

–

user11327631

28 Окт 2019 в 05:46

Вы можете перебрать и, наконец, сшить его в строку

–

sugars

28 Окт 2019 в 05:48

Я изменил свой ответ. Если это вам поможет, примите мой ответ, спасибо :) @ Mr.MarkTawin

–

sugars

28 Окт 2019 в 05:57

Я видел вашу точку зрения на ответ, сэр, но что, если у меня есть тонны элементов html, как в моем примере выше, мне нужно делать это один за другим элементом в temp

–

user11327631

28 Окт 2019 в 06:28

Как каждый

Стиль тела:

–

user11327631

28 Окт 2019 в 06:29

Как передать данные из jquery в html?

2 ответа

Похожие вопросы

Новые вопросы

javascript