如何使用 JavaScript / AJAX 将对象插入 HTML 表答案

【问题标题】：How can i insert objects into a HTML table using JavaScript / AJAX如何使用 JavaScript / AJAX 将对象插入 HTML 表
【发布时间】：2019-01-16 01:48:25
【问题描述】：

我正在尝试创建一个网站，该网站通过搜索艺术家姓名来获取音乐论坛的信息，并根据受欢迎程度、曲目数量和发行日期填充该艺术家的 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>

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

【问题讨论】：

响应是什么样的？
所以我没有看到您试图将数据实际放入表中的位置。是否有任何代码实际上试图这样做，或者我只是想念它？
我尝试了多种方法，这是我目前正在尝试的方法，但我绝对没有得到任何回应。
花点时间阅读如何Javascript Debugging line by line using Google Chrome。实际问题很基础。

标签： c# jquery html ajax

【解决方案1】：

假设您从该发布请求中获取所需的数据，我认为问题可能出在：

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

该选择器查找 id='body' 的元素，而您的 html 中没有该元素。相反，请尝试使用：

$('tbody').append(html);

或者将该 id 放在你的 tbody html 标签上：

<tbody id='body'></tbody>

然后您的脚本将附加到该控件。

继续尝试检查开发人员的控制台以查看您的代码抛出的错误。我想您的代码会出现错误（CTRL-SHIFT-I 或右键单击并选择检查，具体取决于您的 Web 浏览器）。

【讨论】：

【解决方案2】：

如果您将其与示例记录一起流出，您会注意到变量html 将具有类似于此的值：<tr><tr><tr><tr></tr>--取决于从您的 AJAX 请求返回的记录数。

当然，这假设运行时不会因为 totalCells 未定义而崩溃。（以及array 和count。）

也有更好的方法来解决您的问题。我会推荐：

    var table = $('<table><tbody></tbody></table>');
    var tbody = table.children('tbody');

    for (var i = 0; i < responseData.length; i++) {
        var tr = $('<tr></tr>');

        for (c = 0; c < totalCells; c++) {
            tr.append($('<td></td>').html(array[c]));
        }

        tbody.append(tr);
    }

    $('body').append(table);

【讨论】：