JQuery的Ajax调用ASP.NET MVC API返回错误

Question

我有一个API控制器CustomerController返回客户的数据：

using System.Collections.Generic; 
using System.Linq; 
using System.Web.Http; 
using CustomerMngmt.Models; 

namespace CustomerMngmt.Controllers 
{ 
    public class CustomersController : ApiController 
    { 
     private readonly Customer[] _customer = 
    { 
     new Customer 
     { 
      Id = 1, 
      firstName = "Florian", 
      lastName = "Hofmeister", 
      emailAddress = "florianhofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     }, 
     new Customer 
     { 
      Id = 2, 
      firstName = "Svenja", 
      lastName = "Hofmeister", 
      emailAddress = "svenjahofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     }, 
     new Customer 
     { 
      Id = 3, 
      firstName = "Marvin", 
      lastName = "Hofmeister", 
      emailAddress = "marvinhofmeister@test.de", 
      company = "Germany", 
      pictureURL = "......jpg" 
     } 
    }; 



     public IEnumerable<Customer> GetAllCustomers() 
     { 
      return _customer; 
     } 

     public Customer GetCustomerById(int id) 
     { 
      var customer = _customer.FirstOrDefault(c => c.Id == id); 

      return customer; 
     } 
    } 
} 

然后我在JavaScript加载数据有：

function loadCustomer() { 

    jQuery.support.cors = true; 
    $.ajax({ 
     url: 'http://localhost:54172/api/customers', 
     type: 'GET', 
     dataType: 'json', 
     data:{}, 
     success: function (data) { 

      for (var i = 0; i < data.length; i++) { 
       var customer = new customer(
        '1', 
        data[i].id, 
        data[i].firstName, 
        data[i].lastname, 
        data[i].companyName, 
        data[i].emailAddress, 
        data[i].pictureURL); 

       self.customers.push(customer); 
      } 
     }, 
     error: function (x, y, z) { 
      alert(x + '\n' + y + '\n' + z + "TEST"); 
      console.log(x + '\n' + y + '\n' + z + "TEST"); 
     } 
    }); 
} 

和我问题在于该功能不会从控制器加载元素。相反，我收到一条错误消息[object Object]errorTEST。

Answer 1

在阿贾克斯网址不符任何控制器或行动。如果脚本位于cshtml文件中，则可以使用url助手构建url。出于安全原因，如果您在此进行身份验证，我建议使用POST而不是GET。最后，你可以使用responseText来查看实际的错误信息。

$.ajax({ 
    url: @Url.Action("Customers", "GetAllCustomers"), // or try 'http://localhost:54172/Customers/GetAllCustomers' 
    type: 'POST', 
    success: function (data) { 
     for (var i = 0; i < data.length; i++) { 
      var customer = new customer(
       '1', 
       data[i].id, 
       data[i].firstName, 
       data[i].lastname, 
       data[i].companyName, 
       data[i].emailAddress, 
       data[i].pictureURL); 

      self.customers.push(customer); 
     } 
    }, 
    error: function (x, y, z) { 
     alert(x.responseText + '\n' + y + '\n' + z + "TEST"); 
     console.log(x.responseText + '\n' + y + '\n' + z + "TEST"); 
    } 
}); 

Answer 2

尝试改变网址这一个 - 在我看来，很显然你应该改变一个AJAX网址（/控制器/动作），并从你的API控制器返回JSON> ControllerName /法

Answer 3

。因此，我看不到在您的代码中命名客户的操作。

Answer 4

API没什么问题，我怀疑这是你的JavaScript在试图创建customer集合时炸毁了。尝试添加这给JavaScript：

function customer(id, firstname, lastname, companyname, email, pic) { 
      this.Id = id; 
      this.FirstName = firstname; 
      this.LastName = lastname; 
      this.Company = companyname; 
      this.email = email; 
      this.Pic = pic; 
     } 

，并改变你创建变量，我已经改变了在我的例子cus ...

var cus = new customer(
         '1', 
         data[i].id, 
         data[i].firstName, 
         data[i].lastname, 
         data[i].companyName, 
         data[i].emailAddress, 
         data[i].pictureURL); 

        self.customers.push(cus);