来自 AJAX 脚本的 JSON 数据未出现在 HTML 表中答案

【问题标题】：JSON data from AJAX script is not appearing in HTML table来自 AJAX 脚本的 JSON 数据未出现在 HTML 表中
【发布时间】：2011-04-04 03:12:09
【问题描述】：

这是我的代码：

$(document).ready(function () {

    $.ajax({
        url: '/blog/getposts',
        type: 'GET',
        dataType: 'json',
        success: function (result) {

            var insert = '';

            $.each(result, function (index, item) {
                insert += '<tr><td>' + item.Name + '</td><td>' + item.Body + '</td><td>' + item.DateCreated + '</td></tr>';
            });
            $('#blogTable').append(insert);
        }


    });
});

当我不尝试插入任何 <tr> 或 <td> 标签时它可以工作，但当我包含这些标签时没有任何显示。我也有 Firebug，但我不知道要寻找什么。

我想显示一个表，其中包含名称、正文和创建日期的标题，然后是下面列出的每个条目的所有数据。

编辑：我的 JSON 结果

[
{"PostId":4,"UserId":2,"Body":"testtat","DateCreated":"\/Date(1301692095627)\/","Name":"derper"},  
{"PostId":3,"UserId":2,"Body":"tesateat","DateCreated":"\/Date(1301692093497)\/","Name":"derper"},  
{"PostId":2,"UserId":2,"Body":"testest","DateCreated":"\/Date(1301692091527)\/","Name":"derper"},  
{"PostId":1,"UserId":2,"Body":"derprperp","DateCreated":"\/Date(1301692082100)\/","Name":"derper"}
]

编辑：FireBug 的 InnerHTML 粘贴

<tbody><tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>

编辑：所以这是我的 html：

<table id="blogTable">
<tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>

如果我将插入内容更改为：

插入 += '<td>' + item.Name + '</td><td>' + item.Body + '</td><td>' + item.DateCreated + '</td>';

然后我运行网站时的 innerhtml 输出是：

<tbody><tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>
</tbody>
 <td>derper</td><td>testtat</td><td>/Date(1301692095627)/</td>
 <td>derper</td><td>tesateat</td><td>/Date(1301692093497)/</td>
 <td>derper</td><td>testest</td><td>/Date(1301692091527)/</td>
 <td>derper</td><td>derprperp</td><td>/Date(1301692082100)/</td>

所以我的问题是当我尝试添加新行时，它们不会出现，但是当我只使用单元格 (<td>) 时，它们会出现。如何在<tbody> 中添加新的<tr>？

【问题讨论】：

请发布您正在获取的 JSON。顺便说一句，你真的不需要在这里使用$.ajax()； $.getJSON() 就足够了。 ...此外，这听起来像是 $.tmpl() 的完美用例。
您能提供一个$.getJSON() 或$.tmpl() 的示例吗？或两者？我尝试使用 $.tmpl() 方法，但它也没有出现。我只希望 Name、Body 和 DateCreated 显示在表格中。
到底出了什么问题？我刚刚测试了你的代码，它按写的那样工作..
我不确定...当我插入 <p>+ item.Name </p> 等数据时，它会起作用并显示出来。但是当我尝试使用<tr><td> 标签插入数据时，它不起作用。也许是因为我从 JSON 请求中发送了额外的字段？（postid 和 userid）。
所以如果你console.log(item.Name) 它吐出正确的信息？当您使用 Firebug 检查 DOM 时，它会显示 HTML 表格还是表格是空白的？

标签： jquery ajax json asp.net-mvc-3

【解决方案1】：

到目前为止，您发布的代码有效。见：jsfiddle.net/SQVz6/。

使用 Firebug，检查表：blogTable。（右键单击表格通常会在上下文菜单中显示 Firebug 的“检查”工具。）

~~~~~~~
表结构看起来对吗？
在检查器中右键单击<table id="blogTable">，然后单击Copy innerHTML
将结果粘贴到上面的问题中。

【讨论】：

【解决方案2】：

尝试将.append() 更改为.appendTo()？

【讨论】：

【解决方案3】：

经过数小时试图找出解决方案后，我将插入语句更改为：

 $('#blogTable tr:last').after(insert);

现在可以使用了。 innerHTML 输出如下：

<tbody>
<tr>
    <th>Name</th>
    <th>Body</th>
    <th>Date</th>
</tr>
<tr>
    <td>derper</td>
    <td>testtat</td>
    <td>/Date(1301692095627)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>tesateat</td>
    <td>/Date(1301692093497)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>testest</td>
    <td>/Date(1301692091527)/</td>
</tr>
<tr>
    <td>derper</td>
    <td>derprperp</td>
    <td>/Date(1301692082100)/</td>
</tr>
</tbody>

【讨论】：

好吧，你让它工作很好，但它仍然没有意义。无论是否存在显式 <tbody> 元素，两个插入语句都有效——至少在（Chrome、FF 和 IE8）上。这里缺少一些东西。