Question

我试图从web-api获取数据。在单个html页面上运行时，我收到了数据的响应，但是如果这个脚本是单独编写的（在html页面的外面），我无法获取数据。

这是第一个成功接收数据的案例。

<div class="container">
<svg class="asSvg" width="60" height="60" viewBox="0 0 60 60">
  <defs>
    <clipPath id='clipping'>
      <path d='M0,0 L0,0 L35,0 L60,26 L60,60 L0,60'/>
    </clipPath>
  </defs>
  <g clip-path='url(#clipping)'>
    <image xlink:href='https://s11.postimg.org/vzvfu6osz/chip_25.png'  width="60" height="60"/>
  </g>
</svg>
  
<div class="chip">
  <img src="https://s11.postimg.org/vzvfu6osz/chip_25.png">
</div>
</div>

这是我遇到错误的另一种情况。

controller.js

<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<button type="submit" class="btn" ng-click="login()">Get Data</button>
    <table border="1">
        <tr>
            <td>{{post}}</td>
            <td>{{post.Name}}</td>
            <td>{{post.Price}}</td>
            <td>{{post.Category}}</td>
        </tr>

    </table>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"</script>
<script>    
     var app = angular.module("MyApp", []);

     app.controller("PostsCtrl", function ($scope, $http) {
     $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
     success(function (data, status, headers, config) {
          $scope.posts = data;
          alert("recived data");
          //alert(data.data.ID);
      }).
      error(function (data, status, headers, config) {
          // log error
          alert("error");
      });
});
</script>

home.html的

var app = angular.module("angularApp");

app.controller("loginController", function ($scope, $http) {

    $scope.login = function () {
        $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
            success(function (data, status, headers, config) {
            $scope.posts = data;
            alert("recived data");
            //alert(data.data.ID);
        }).
        error(function (data, status, headers, config) {
            // log error
            alert("error");
        });
    };        
});

的index.html

<div class="container-fluid" style="padding-top: 10px; position: relative; color:darkorange">
<table border="1">
        <tr>
            <td>{{post}}</td>
            <td>{{post.Name}}</td>
            <td>{{post.Price}}</td>
            <td>{{post.Category}}</td>
        </tr>

    </table>
</div>

routing.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularApp">
<head>
<title>Ebank</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="lib/routing.js"></script>
<script src="lib/Controller.js"></script>
</head>
<body style="background-color:#333">
<div ng-view></div>
</body>
</html>

你能说出这里犯的错误吗？

Answer 1

这就是你没有在html中获取数据的原因请参阅下面的controller.js

$ scope.posts 行已注释。

$ scope.login 声明为函数，未被调用。

app.controller("loginController", function ($scope, $http) {
   /***************************************************/
       $scope.login();
   /***************************************************/
    $scope.login = function () {
        $http.get('http://localhost:35456/api/customer/Dipti123/dipti').
            success(function (data, status, headers, config) {
            /***************************************************/
            $scope.posts = data;
            /***************************************************/
            alert("recived data");
            //alert(data.data.ID);
        }).
        error(function (data, status, headers, config) {
            // log error
            alert("error");
        });
    };        
});

更新1：

在您使用 $ scope.posts 的控制器中，但在您使用的HTML 帖子中，将其更改为帖子，如下面HTML < / p>

<button type="submit" class="btn" ng-click="login()">Get Data</button>
    <table border="1">
        <tr>
            <td>{{posts}}</td>
            <td>{{posts.Name}}</td>
            <td>{{posts.Price}}</td>
            <td>{{posts.Category}}</td>
        </tr>

    </table>
</div>

无法在angularjs中执行$ http方法

1 个答案:

更新1：