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

Question

这是我的代码：

$(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);
        }


    });
});

当我不尝试插入任何 或 标签时它会起作用，但当我包含这些标签时不会出现任何内容。我也有 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>

如果我将插入更改为：

insert += '' + item.Name + '' + item.Body + '' + item.DateCreated + '';

那么我运行网站时的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>

所以我的问题是当我尝试添加新行时，它们不会显示，但是当我只使用单元格时（ ），他们出现了。如何将新的 添加到 中？

Answer 1

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

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

~~~~~~~
表结构看起来正确吗？
在检查器中右键单击，然后单击复制innerHTML
将结果粘贴到上面的问题中。

Answer 2

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

Answer 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>