Question

我正在研究laravel，并且有一个HTML块，如下所示

<div class="white-panel">
  <div class="media-body">
    <h4 class="media-heading">
    <!-- Here comes the title -->
    </h4>
  </div>
</div>

我还有另一个文件index.blade.php，该文件发出AJAX Jquery请求并获得标题。

function loadTitle() {  
  $.ajax(
    {  
      url: '{{url}}/get-data',  
      type: 'get',
      datatype: 'json',
      data:
        {  
           in: in
        }
     })
     .done(function(data){
       data.forEach( function(index) {
         console.log(index)
       }
     }    
}

此AJAX请求工作正常，我可以在控制台中看到标题，我想要做的是遍历标题并添加问题开始处给出的HTML块，然后将标题添加到h4标记内并附加append块每个标题的正文。
console.log的输出：

title1
title2 
title3
title4

注意：使用foreach遍历jquery很简单，但是我对HTML块部分感到困惑。

Answer 1

您可以创建一个渲染器函数，以避免像这样重复代码

<!doctype html>
<html>

<head>
  <title>A page</title>
</head>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function renderTitleHtml(title) {
      var html = '';

      html += '<div class="white-panel">';
      html += '<div class="media-body">';
      html += '<h4 class="media-heading">';
      html += title;
      html += '</h4>';
      html += '</div>';
      html += '</div>';


      return html;
    }

    function loadTitle() {
      $.ajax({
          url: '{{url}}/get-data',
          type: 'get',
          datatype: 'json',
          data: { in: in
          }
        })
        .done(function(data) {
            //assuming an array of titles is returned
            $(data).each(function(index, title) {
              var titleEl = $('<div></div>');
              titleEl.html(renderTitleHtml(title));
              $(body).append(titleEl);
            })
          }
        }
  </script>
</body>

</html>

在Ajax结果之后多次打印div

1 个答案: