Javascript AJAX显示未定义的_Javascript_Jquery_Ajax

Javascript AJAX显示未定义的

javascript jquery ajax

Javascript AJAX显示未定义的,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个包含这些代码的html页面，它的作用是显示驻留在数据库中的员工列表 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="Scripts/jquery-1.10.2.js"></script> <script> $(document).ready(functio

我有一个包含这些代码的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>

我有一个名为

Employees

的控制器，当我通过

URI

运行API时，它会正确地显示员工列表

编辑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

时，它仍然显示undefined。

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

$.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>')
    });
  }
});

$.ajax({
键入：“GET”，
url:“api/员工”，
数据类型：“xml”，
成功：功能（数据）{
employeeList.empty（）；
var x=$（data.find（'ArrayOftblEmployee'）；
$.each（x，函数（索引，val）{
var fullName=val.find（'tblEmployee'）。find（'Employee_Name'）；
employeeList.append（“”+全名+”）
});
}
});

您的jquery代码似乎还可以。我建议您在服务器中使用“模型类”。

您有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>


$（文档）.ready（函数（）{
var employeeList=$（“#employeeList”）；
$（'#DisplayEmp'）。单击（函数（）{
$.ajax({
键入：“GET”，
url:“api/员工”，
数据类型：“xml”，
成功：功能（数据）{
employeeList.empty（）；
var ArrayOftblEmployee=data.find（'ArrayOftblEmployee'）；
$.each（数据，函数（索引，val）{
var fullName=val.find（'tblEmployee'）。find（'Employee_Name'）；
employeeList.append（“”+全名+”）
});
},
错误：函数（错误）{
console.log（错误）
}
});
});
});

终于找到了如何显示我使用的正确值

val.employee\u Name

我降低了案例

员工

有人能给我解释一下吗？我接受它作为答案

您能为您的问题添加一个示例ajax响应吗？

$。ajax

返回纯文本。。。因此，要么使用

$.parseJSON

转换为JSON，要么直接使用$。getJSON@MohammadHamedani什么反应？它显示的只是当我运行程序

Employees.html

并点击按钮以显示它显示的

undefined

@SanjiBukai的员工时，你是什么意思？您能提供语法吗？@VianOjedaGarcia Replace在脚本Replace

$.ajax（{

with

$.getJSON）的第四行中({

我添加了你的代码，如何查看日志？因为什么都没有发生，所以当我用

dataType:xml

替换

dataType:json

时，它不会显示任何内容。但是在尝试了一些东西之后，我发现奇怪的是

val.Age

显示

未定义的，但当我使用val.Age
时，它会显示正确的数据。这似乎变得一团糟。太奇怪了。请分享你最后的ajax请求以提高我的知识！谢谢。@MohammadHamedani你的请求是什么意思？我的ajax代码？这就是你的意思吗？很抱歉，我对ajax一无所知，我刚刚开始学习Web API，这是我知道的唯一的ajax代码。我是说aja您在问题中添加了x个有效的代码。（$.ajax…）。Thanks@MohammadHamedani请查看我的编辑版本nof代码。刚刚将val.Employee\u Name
更改为val.Employee\u Name
<!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>