Question

这有点难以解释，我会尽我所能。

我有一个基于Spring的网站，它使用带有AJAX和jQuery的静态HTML页面。我想在HTML页面中呈现一些信息，这些信息的大小总是不同。

我有一张这样的表:(不介意可怕的设计）

因此，根据从API返回的国家/地区和用户的数量，我希望拥有不同的行数。

我目前正在使用jQuery函数在提交此表单后注入HTML代码：

如：

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
      url: '/api/stats/' + $(event.currentTarget).serialize(),
      type: 'GET',
      success(msg) {
          // language=HTML
          $('#result').html(`
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                            <tr> <!-- I want to generate here the right amount of rows -->
                                <td>Test</td>
                                <td>2</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>`);
      },
      error() {
          $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
      },
  });

从API收到的响应如下所示：

{
"countries":
    [{"data":xx,"users":xx},
    {"data":xx,"users":xx}],
"other data":
    [whatever]
}

等等。

如果N是countries数组的大小，我该如何渲染N行？

Answer 1

一个解决方案可能是建立你的＆＃34; html＆＃34; 3部分的内容：你的集团的开始，每个行的循环根据国家数组的大小，然后集团的结束：

$('#stats').submit((event) => {
  event.preventDefault();
  $.ajax({
  url: '/api/stats/' + $(event.currentTarget).serialize(),
  type: 'GET',
  success(msg) {
      // language=HTML

      // The begin of your html bloc
      var result = `
            <div class="container">
                <h2>Country stats:</h2>
                <div class="panel panel-group">
                    <table>
                        <thead>
                            <tr> 
                                <th>Country</th>
                                <th>Users</th>
                            </tr>
                         </thead>
                         <tbody>
                   `;

      // Just get your countries array here and loop, this can be wrong
      $.each(response.countries, function() {
          // build each row as you need
          result += '<tr>' + 
                        '<td>' + this.data + '</td>' +
                        '<td>' + this.users + '</td>' +
                     '</tr>';
      });

      // The end of your html bloc
      result += `              
                    </tbody>
                </table>
            </div>
        </div>
                `;

      $('#result').html(result);
  },
  error() {
      $('#result').html("<div class='alert alert-danger lead'>ERROR</div>");
  },
 });

这是你在找什么？

Answer 2

我会将HTML的其余部分分配给变量，如下所示：

var html = `<div class="container">
            <h2>Country stats:</h2>
            <div class="panel panel-group">
                <table>
                    <thead>
                        <tr> 
                            <th>Country</th>
                            <th>Users</th>
                        </tr>
                     </thead>
                     <tbody>`;

然后，添加你的行：

for(var i = 0; i < msg.countries.length; i++){
    html += "<tr><td>" + msg.countries[i].data + "</td><td>" + msg.countries[i].users + "</td></tr>";
}

最后，添加HTML的结尾并将其设置为元素：

html += `</tbody>
                </table>
            </div>
        </div>`;
$('#result').html(html);

希望这有帮助！

在AJAX中动态生成HTML行

2 个答案: