javascript - 来自 Angular JS 的 HTTP Get 请求收到空回复

标签 javascript angularjs asp.net-web-api angularjs-http

由于我对网络开发相当陌生,因此这很可能是一个很容易解决的问题。不幸的是,我无法自己解决这个问题,因为我不知道在哪里搜索。

目前,我正在尝试从本地计算机上运行的 ASP.NET Web API 获取数据。为了获取这些数据,我使用 AngularJS 编写了一小段 JavaScript:

function MainController($scope, $http) {
  $http.get("http://localhost/DBLayerDLL/api/tablets/1005").
    then(function(response) {$scope.data=response;},
         function(response){$scope.data=response;});
}

使用的HTML页面,也很简单:

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="scripts/main.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>Hello World!</h1>
    <div>
      <div>Data: {{data}}</div>
    </div>
  </body>

</html>

我的Web API中 Controller 的操作实现如下:

[RoutePrefix("api/tablets")]
public class TabletsController : ApiController
{
    [Route("{ID}")]
    [HttpGet]
    public TabletRecord GetTablet(int ID)
    {
        TabletRecord tablet = new TabletRecord();
        tablet.LoadFromID(ID);
        return tablet;
    }
}

问题出在我从 HTTP 请求获得的响应中。当打印在页面上时,它看起来像这样:

{"data":"","status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost/DBLayerDLL/api/tablets/1005","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}

这是不正确的,因为我知道我的 API 将返回数据。当我使用 Fiddler 来查看发生了什么时,这对我来说更加奇怪。在 Fiddler 中,我可以看到请求并看到响应与我在网页上看到的完全不同:

Fiddler HTTP request

由于我缺乏知识和经验,我不知道发生了什么......

  • 我的 JavaScript 中是否做错了什么?
  • 我应该在 HTML 页面中执行其他操作吗?
  • 或者我的 Web API 中需要什么特殊的东西吗?

非常感谢任何帮助或想法!

最佳答案

在花费了更多时间之后,我发现需要做一些事情来解决我的问题:

  1. 我注意到我必须在 Web API 上启用 CORS,以便 JavaScript 能够向我的 Web API 发出请求。我是通过这个link来到这里的,我只是按照说明的步骤进行操作来启动并运行它。

  2. 我首先还发现,我还可以使用 JavaScript 中提供的通用 XMLHttpRequest 对象来获取数据。通过首先使用此方法显示我的数据,我还发现了下一项:

  3. $http.get方法返回的响应对象实际上是我的Web API直接返回的对象。所以我可以使用定义的属性来显示所需的数据。

关于javascript - 来自 Angular JS 的 HTTP Get 请求收到空回复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30123518/

相关文章:

javascript - Angular 路线不起作用。

javascript - AngularJS 通过选择空选项进行过滤

c# - 排除/包含导航属性

javascript - 如何使用 ReactJS 上传图片并保存到本地存储?

JavaScript 使用递归添加两个链表值

javascript - 在移动端浏览 PWA

javascript - Internet Explorer - 语法错误 - AngularJS

javascript - 在 JavaScript 中多次引用一个变量

c# - 防止整数值在 ASP.NET Web API 模型绑定(bind)中设置 bool 参数?

c# - ModelState 始终被认为是有效的,无论必填字段中的空值如何