Question

我正在尝试使用ajax在div中显示字符串列表但我不确定如何解析Ajax中的数据。

这是我在C＃中的方法：

public JsonResult GetRecentEmployeeRecords(string whse)
{
    var recentRecords = _employeeDb.EmployeeMasters.Where(e => e.Branch == whse).OrderBy(e => e.CreateDate).Take(10);
    var list = recentRecords.Select(r => r.EmployeeNumber + " - " + r.LastName + ", " + r.FirstName).ToList();
    var jsonSerialiser = new JavaScriptSerializer();
    var json = jsonSerialiser.Serialize(list);
    return Json(json, JsonRequestBehavior.AllowGet);
}

这是我的ajax声明：

    $.ajax(
    {
        type: 'GET',
        url: '../Employee/GetRecentEmployeeRecords',
        data:
        {
            whse: $('#Branch').val(),
        },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data) {
            for (var i in data) {
                $('#recentEmployeeNumbers').val(data[i] + "<br/>");
                alert(data[i]);
            }
        }
    });

似乎我正在收回数据，但它似乎只是一次给我一个字符。一次获取整个字符串并在div中显示所有十个字符串的最佳方法是什么？

Answer 1

我看到两个三个问题。首先，看起来您在c＃代码中对响应进行了双重编码。 JavaScriptSerializer.Serialize()和Json()或多或少做同样的事情。选一个。

其次，在JavaScript中，for..in用于枚举Object。看起来你想迭代一个数组。为此，请使用常规for循环：

for (var i = 0; i < data.length; i++) {
    $('#recentEmployeeNumbers').val(data[i] + "<br/>");
    alert(data[i]);
}

迭代数组的一种更简单的方法是使用jQuery＆＃39; $.each()：

$.each(data, function(i) {
    $('#recentEmployeeNumbers').val(this + "<br/>");
    alert(this);
});

或者，JavaScript 5＆＃39; Array.forEach()：

data.forEach(function(item, i) {
    $('#recentEmployeeNumbers').val(item + "<br/>");
    alert(item);
});

对旧版浏览器使用Array.forEach() polyfill。

编辑：第三，您将在循环的每次迭代中替换#recentEmployeeNumbers的值。 .val()仅适用于输入元素，但您询问有关填充div的信息。你想要.append()（对于html）或.text()（将html编码值）：

$.each(data, function(i) {
    $("<div>").text(this).appendTo('#recentEmployeeNumbers');
});

我注意到的另一件小事。你真的不需要致电.ToList()。 JSON序列化程序应该能够处理序列化IEnumerable<string>而没有问题。

Answer 2

您对响应进行了双JSON编码。

return Json(..)会对结果进行编码，但您已在对jsonSerialiser.Serialize的调用中对其进行了编码。从MSDN文档中Controller.Json方法：

创建一个JsonResult对象，将指定对象序列化为JavaScript Object Notation（JSON）。

要解决此问题，只需将list直接传递给Json来电：

public JsonResult GetRecentEmployeeRecords(string whse)
{
    var recentRecords = _employeeDb.EmployeeMasters.Where(e => e.Branch == whse).OrderBy(e => e.CreateDate).Take(10);
    var list = recentRecords.Select(r => r.EmployeeNumber + " - " + r.LastName + ", " + r.FirstName).ToList();

    return Json(list, JsonRequestBehavior.AllowGet);
}

此外，在您的JavaScript中，您将在每次迭代时覆盖div的内容：

$('#recentEmployeeNumbers').val(data[i] + "<br/>");

您可以将val替换为append，以便将详细信息附加到div：

$('#recentEmployeeNumbers').append(data[i] + "<br/>");

使用Ajax在DIV中显示列表

2 个答案: