我对从 webapi 到 angularjs 和 html 的 get 方法有问题

健康玛纳斯

我试图使用前端 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 ”不起作用。

请帮我解决这个问题。

乔治亚

添加一个.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);
    });
}]);

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章