我对从 webapi 到 angularjs 和 html 的 get 方法有疑问答案

【问题标题】：i have a problem with the get method from a webapi to angularjs and html我对从 webapi 到 angularjs 和 html 的 get 方法有疑问
【发布时间】：2020-05-29 10:01:00
【问题描述】：

我正在尝试使用前端 HTML 和 AngularJS 开发一个网站。我也有一个在线托管的 WebApi。我试图使用 angularjs 控制器 http get 方法从 JSON 格式的 WebApi 获取数据，并使用 ng-repeat 指令显示它，但我没有获取数据，从 WebApi 获取数据存在一些问题。 WebApi 是使用 asp.net c# WebApi 创建的。该网站的代码在这里（它是一个博客网站）-

blogController.js：

app.controller('blogController', ['$scope','$http', function ($scope, $http) {
    $http.get('http://www.example.com/api/blog')
      .then(function(res){
        $scope.blog = res.data;
    });
}]);

HTML 代码在下面 -

博客.html

<html>
   <head></head>
   <body app="myApp" ng-controller="blogController">
      <div ng-repeat="blg in blog">
         <h2>{{blg.BLOG_TITLE}}</h2><br/><br/><hr/>

         <p>{{blg.BLOG_DESC}}</p><br/>
         <p>{{blg.BLOG_AUTHOR}}</p>
      </div>
   </body>
</html>

Json WebApi 看起来像这样 -

[
  {
    "ID": 1.0,
    "BLOG_DATE": "2020-05-02T00:00:00",
    "BLOG_AUTHOR": 1.0,
    "IMG_URL": null,
    "BLOG_TITLE": "Test Blog",
    "SHORT_DESC": "Blog 1",
    "BLOG_DESC": "Blog1 Desc",
    "NOTE": null,
    "BLOG_TAG": "Uncategorized"
  },
  {
    "ID": 2.0,
    "BLOG_DATE": "2020-05-02T00:00:00",
    "BLOG_AUTHOR": 1.0,
    "IMG_URL": null,
    "BLOG_TITLE": "Test Blog",
    "SHORT_DESC": "Blog 1",
    "BLOG_DESC": "Blog1 Desc",
    "NOTE": null,
    "BLOG_TAG": "Uncategorized"
  },
  {
    "ID": 3.0,
    "BLOG_DATE": "2020-05-02T00:00:00",
    "BLOG_AUTHOR": 1.0,
    "IMG_URL": null,
    "BLOG_TITLE": "Test Blog",
    "SHORT_DESC": "Blog 1",
    "BLOG_DESC": "Blog1 Desc",
    "NOTE": null,
    "BLOG_TAG": "Uncategorized"
  },
  {
    "ID": 4.0,
    "BLOG_DATE": "2020-05-02T00:00:00",
    "BLOG_AUTHOR": 1.0,
    "IMG_URL": null,
    "BLOG_TITLE": "Test Blog",
    "SHORT_DESC": "Blog 1",
    "BLOG_DESC": "Blog1 Desc",
    "NOTE": null,
    "BLOG_TAG": "Uncategorized"
  }
]

问题仅发生在上述控制器中的 url 上。我尝试使用另一个 url，来自 myjson.com 的 url，它有效。但是“http://www.example.com/api/blog”不起作用。

请帮我解决这个问题。

【问题讨论】：

网址一定是返回数据吗？如果您在浏览器中键入 URL，它会返回预期的 JSON 吗？
使用开发者控制台中的网络标签来检查请求和响应。这可能是 CORS 问题。
“不起作用”不是一个明确的问题描述。错误信息到底是什么？检查网络选项卡，单击可能为红色的特定请求并查看错误消息。这是调试/故障排除的一部分

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

【解决方案1】：

添加.catch 块以显示错误：

app.controller('blogController', ['$scope','$http', function ($scope, $http) {
    $http.get('http://www.example.com/api/blog')
      .then(function(res){
        $scope.blog = res.data;
    }).catch(function(response) {
        console.log("ERROR:", response);
    });
}]);

然后在开发者控制台的网络选项卡中检查响应。

【讨论】：