我正在尝试使用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中显示所有十个字符串的最佳方法是什么?
答案 0 :(得分:2)
我看到两个 三个问题。首先,看起来您在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>
而没有问题。
答案 1 :(得分:0)
您对响应进行了双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/>");