无法使用 JQuery 从 Webapi 获取 <table>JSON 数据，ASP.net

Question

我已经遇到这个问题一段时间了，我只是无法让它工作。它目前什么也没做，我不知道我做错了什么。

JSON数据：

{"$id":"1","content":"hej","fname":"Emanuel","subject":"hejsan"}

JQuery 方法：

    function get_latest_messages(id) {
        $.getJSON('http://localhost:xxxxx/api/value/' + id, function (data) {
            var tr;
            for (var i = 0; i < data.length; i++) {
                tr = $('#tableMessage');
                tr.append("<td>" + data[i].fname + "</td>");
                tr.append("<td>" + data[i].content + "</td>");
                tr.append("<td>" + data[i].subject + "</td>");
                $('#tableMessage').append(tr);
            }
        });

HTML-表格代码：

  <table border="1" id="tableMessage">
<tr>
    <th>Från</th>
    <th>Ämne</th>       
    <th>Meddelande</th>
</tr>
</table>

ASP.net，Page_load代码 id 在方法中声明：

Page.ClientScript.RegisterStartupScript(this.GetType(), "clientScript", "<script     language=JavaScript>get_latest_messages("+id+");</script>");

Answer 1

首先，直接在请求对象中处理回发方法的设计很糟糕。我们都知道这就是jQuery记录实现的方式，但它是一种反模式。它有效，但难以阅读。而是构造将处理回发数据的方法，在本例中为handleJson

您也忘记实际添加TD所需的TR元素。在循环之外选择表也更有效。

function get_latest_messages(id) {
    // Handle your incomming data from the api
    function handleJson(data) {
        // the data parameter is supposed to be your json
        var table = $('#tableMessage');
        for (var i = 0; i < data.length; i++) {
            table.append("<tr>" +
                "<td>" + data[i].fname + "</td>" +
                "<td>" + data[i].content + "</td>" +
                "<td>" + data[i].subject + "</td>" +
                "</tr>");
        }
    }
    // Call
    $.getJSON('http://localhost:xxxxx/api/value/' + id, handleJson);
}

Hej föresten och lycka till！