使用 jQuery 和 Ajax 显示列表数据

Question

我有以下结构：

1. WebService - 从数据库中获取数据并返回列表 人
2. ASP.NET MVC 应用程序 - 使用 1) 中的 Web 服务。

HomeControler 中有一个方法：

public JsonResult GetDbData()
{
    WebService1SoapClient client = new WebService1SoapClient();
    List<Person> lstPersons = client.GetPersons();

    return Json(lstPersons, JsonRequestBehavior.AllowGet);
}

我想以这种方式使用 jQuery Ajax 调用在 Index.cshtml 视图中显示人员列表：

<div>
    <div id="div3">Database data.</div>
</div>

<input id="btnGetDBData" type="button" value="GetDBData" />

$('#btnGetDBData').click(function () {
    $.ajax({
        url: "/Home/GetDbData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#div3").html(data);
        },
        error: function (xhr, status) {
            alert(status);
        }
    });
});

但是，它不起作用。

我是 jQuery 新手，需要某种表格或模板，或者类似可以显示列表或表格结构的中继器。

Person 类如下所示：

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

我需要在 Html 表格中显示人员列表。

Answer 1

为什么你将div3 的内容设置为.html？

success: function (data) {
    $("#div3").html('');
    var div3Content = '';
    for(var i = 0; i < data.length; i++)
    {
       div3Content += '<p>' + data[i].Name + '</p>'; // if Name is property of your Person object
    }
    $("#div3").append(div3Content);
},

这样，Person 的名称将作为<p> 标签添加到div3 中

Answer 2

在success 方法中的data 变量中，您有一个数据数组，您必须手动绘制它

success: function (data) {
    $.each(data, function (index, value) {
        $("#div3").append(value.Id + '|' + value.FirstName + '|' + value.LastName);
    });
}

Answer 3

$('#div3').html(data) 将 HTML 按字面意思设置为数据中的内容。但是，在您的 jQuery 调用之后，data 包含一个对象数组，而不是 HTML。您首先需要定义 HTML 的外观。 - 你想要它作为一个无序列表、一个表格、一组漂亮的瓷砖，...？

对于从数据呈现 HTML，我建议您还考虑模板和/或数据绑定库，例如，例如knockout 允许您在 HTML 中定义模板：

<ul data-bind="foreach: persons">
    <li data-bind="text: LastName"></li>
</ul>

还有你的 jQuery ajax 成功回调：

success: function (data) {
    ko.applyBindings({ persons: data });
}

上面的淘汰赛 foreach 绑定是您要求的一种中继器。

更新：如果你想要一张桌子，剔除模板只需更改为：

<table>
    <thead><tr><th>First Name</th><th>Last Name</th><th>Full Name</th></tr></thead>
    <tbody data-bind="foreach: persons">
        <tr>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td data-bind="text: FirstName() + ' ' + LastName()"></td>
        </tr>
    </tbody>
</table>