Question

我有一个包含这些代码的html页面，它的作用是显示驻留在数据库中的员工列表

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        var employeeList = $('#EmployeeList');

        $('#DisplayEmp').click(function () {
            $.ajax({
                type: 'GET',
                url: 'api/employees',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    employeeList.empty();
                    $.each(data, function (index,val){ 
                        var fullName = val.employee_Name;
                        employeeList.append('<li>' + fullName + '</li>')
                    });
                }
            });
        });
    });
</script>
</head>
<body>
    <input id="DisplayEmp" type="button" value="Display Employees" />
    <input id="ClearEmp" type="button" value="Clear Employees" />
    <ul id="EmployeeList"></ul>
</body>
</html>

我是jquery的新手，所以我对代码并不熟悉。但是当我运行该程序时，它会显示undefined，这是我在混淆中没有任何想法。我逐个检查了我的代码，但仍未找到问题。

这是我的模特课

 public partial class tblEmployee
{
    public int Employee_ID { get; set; }
    public string Employee_Name { get; set; }
    public string Gender { get; set; }
    public Nullable<int> Age { get; set; }
    public Nullable<int> Department_ID { get; set; }
    public Nullable<int> Salary { get; set; }
}

当我通过Employees运行API时，我有一个名为URI的控制器，它会正确显示员工列表。

编辑1 这是服务器的响应

编辑2 这是我的控制器

[HttpGet]
    public HttpResponseMessage GetEmployees(string gender = "All")
    {
        using (EmployeeDBEntities employeeEntity = new EmployeeDBEntities())
        {
            switch (gender.ToLower())
            {
                case "all":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.ToList());
                case "male":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
                case "female":
                    return Request.CreateResponse(HttpStatusCode.OK, employeeEntity.tblEmployees.Where(e => e.Gender.ToLower() == gender).ToList());
                default:
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Value for gender must be All,Male or Female" + gender + "is invalid.");
            }
        }
    }

编辑3：发现它很奇怪，因为你可以看到我的模型类有一个属性Age所以我尝试使用该属性val.Age但它仍然显示undefined但是如果我用val.age替换它注意小写它显示正确的数据。但是，当我使用val.Employee_Name到val.employee_name进行尝试时，它仍显示未定义。

Answer 1

以这种方式更改以查看服务器中的错误：

$.ajax({
  type: 'GET',
  url: 'api/employees',
  dataType: 'xml',
  success: function (data) {
    employeeList.empty();
    var x = $(data).find('ArrayOftblEmployee');
    $.each(x, function (index, val){ 
      var fullName = val.find('tblEmployee').find('Employee_Name');
      employeeList.append('<li>' + fullName + '</li>')
    });
  }
});

您的jquery代码似乎没问题。我的建议是你在服务器中使用“模型类”。

Answer 2

您有xml响应，因此您可以使用以下代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        var employeeList = $('#EmployeeList');

        $('#DisplayEmp').click(function () {
            $.ajax({
                type: 'GET',
                url: 'api/employees',
                dataType: 'xml',
                success: function (data) {
                    employeeList.empty();
                    var ArrayOftblEmployee = data.find('ArrayOftblEmployee');
                    $.each(data, function (index,val){ 
                        var fullName = val.find('tblEmployee').find('Employee_Name');
                        employeeList.append('<li>' + fullName + '</li>')
                    });
                },
                error: function(error) {
                    console.log(error)
                }
            });
        });
    });
</script>
</head>
<body>
    <input id="DisplayEmp" type="button" value="Display Employees" />
    <input id="ClearEmp" type="button" value="Clear Employees" />
    <ul id="EmployeeList"></ul>
</body>
</html>

Answer 3

终于找到了如何显示我使用的正确值val.employee_Name我降低了案例Employee有人可以解释一下吗？我接受它作为答案

AJAX显示未定义

3 个答案: