如何使用 JavaScript/AJAX 将对象插入到 HTML 表格中

Question

我正在尝试创建一个站点，该站点通过搜索艺术家姓名从音乐论坛中获取信息，并按流行度、曲目数量和发行日期填充艺术家 5 首顶级专辑。信息从站点中正确提取，但是当我去创建和 HTML 表时，没有显示任何信息。搜索按钮功能正常，它调用所有正确的信息，可以帮助提供一个解决方案，在该解决方案中我可以从数组中提取信息并在 HTML 中填充/创建表格？下面是我目前正在使用的代码。

function searchClicked() {

   var artist_name = document.getElementById("artistName").value;

   var data = {};

   data.ArtistName = artist_name

    $.ajax({

        type: "POST",

        url: "/Home/SearchAlbum",

        data: JSON.stringify(data),

        success: function (responseData) {

            debugger;

            function writeTable() {

                var html = ''

                for (var i = 0; i < responseData; i++)

                    html += '<tr>';

                for (var j = 0; j < totalCells; j++) {

                    html += '<td>' + array[count] + '</td>';

                    count++;

                }

                html += '</tr>';

            }

            

            $('#body').append(html);

            

            count = 0;

            

        },

                 contentType: "application/json; charset=utf-8",

   })

table {

    width: 100%

}

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

th, td {

    padding: 5px;

    text-align: left;

}

table#artistName tr:nth-child(even) {

    background-color: aquamarine

}

table#artistName tr:nth-child(odd) {

    background-color: aquamarine

}

table#artistName th {

    background-color: black;

    color: white;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="jumbotron">

   <p> Enter Artist Name:</p>

   <input id="artistName" type="text" />

   <button id="seachButton" onclick="searchClicked()">seach</button>

 </div>

<table id="ALbumInfo">

  <thead>

     <tr>

      <th>Album Name </th>

      <th>Release Date</th>

      <th>Popularity</th>

      <th>Number of Tracks</th>

     </tr>

  </thead>

  <tbody></tbody>

</table>

我真的很想了解这里出了什么问题。

Answer 1

假设您从该发布请求中获取所需的数据，我认为问题可能在于：$('#body').append(html);该选择器查找 id='body' 的元素，而您的 html 中没有该元素。相反，请尝试使用：$('tbody').append(html);或者将该 id 放在您的 tbody html 标签上：<tbody&nbsp;id='body'></tbody>然后您的脚本将附加到该控件。继续尝试检查开发人员的控制台以查看您的代码抛出的错误。我想您的代码会出现错误（CTRL-SHIFT-I 或右键单击并选择检查，具体取决于您的网络浏览器）。

Answer 2

如果您将其与示例记录一起流出，您会注意到该变量html将具有类似于以下内容的值：<tr><tr><tr><tr></tr>--取决于从您的 AJAX 请求返回的记录数。当然，这假设运行时不会因为totalCells未定义而崩溃。（以及array和count。）您的问题也有更好的方法。我会推荐：&nbsp; &nbsp; var table = $('<table><tbody></tbody></table>');&nbsp; &nbsp; var tbody = table.children('tbody');&nbsp; &nbsp; for (var i = 0; i < responseData.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; var tr = $('<tr></tr>');&nbsp; &nbsp; &nbsp; &nbsp; for (c = 0; c < totalCells; c++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.append($('<td></td>').html(array[c]));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; tbody.append(tr);&nbsp; &nbsp; }&nbsp; &nbsp; $('body').append(table);