Angular.js-使用$ http从远程服务器获取数据来显示数据

Question

我想发送一个http get请求，这不是问题。 但是问题是我想从服务器页面显示数据。 它必须是JSON页面才能显示来自远程服务器的数据吗？ 还是可以显示任何类型的数据？ 如果是，那如何谢谢

<div class="form" ng-app="myApp" ng-controller="myCtrl">
  <p>Enter URL : <input type="text" ng-model="url" /></p>

  <p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> <!-- 1 -->
  <p>
    <ul ng-repeat="post in posts">
        <li>{{post}}</li>

</ul>
  </p>

  <div ng-bind="result"></div>  <!--  5 -->
</div>


    <script>
            var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope, $http) {

                        $scope.callAPI = function() {             // 2
                        //console.log($scope.url);                //3
                            $http.get($scope.url)
                            .success(function(response) {
                             $scope.posts = response.data;       //4
                                });
                             };

                        });

    </script>
</body>
</html>

另一个版本的代码

<div class="form" ng-app="myApp" ng-controller="myCtrl">
  <p>Enter URL : <input type="text" ng-model="url" /></p>

  <p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> 


 <div ng-bind="result"></div>  <!--  5 -->
</div>


        <script>
                var app = angular.module('myApp', []);
                    app.controller('myCtrl', function($scope, $http) {
                                $scope.$watch('url', function() {
                                  fetch();
                                });



                                function fetch() {

                                    console.log($scope.url);                  
                                        $http.get($scope.url)
                                            .success(function(response) {
                                         $scope.result = response.data;      
                                            });
                                         }

                                   $scope.callAPI= function() {
                                      this.setSelectionRange(0,      this.value.length);
                                }

                          });

        </script>
</body>
</html>

Answer 1

就像评论说的那样，我相信可以从角度看内容的响应类型来解析数据。 您是否尝试添加了接受标头类型？

响应的内容类型是什么？

var req = {
 method: 'GET',
 url: 'http://example.com',
 headers: {
   'Accept': change this to whatever content you want to accept
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

Answer 2

嘿，我找到了我的问题的答案...源代码中有一个错误，这里是正确的

<div class="form" ng-app="myApp" ng-controller="myCtrl as controller">
      <p>Enter URL : <input type="text" ng-model="url" /></p>

      <p><input type="submit" value="CHECK" ng-click="clickButton()" /> </p>                
      <p>
        <ul>
            <li ng-repeat="data in result">
                {{data}}
            </li>

        </ul>
      </p>

    </div>

和

<script>
            var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope, $http) {
                    $scope.clickButton = function() {                               
                        console.log($scope.url);                                
                        $http.get($scope.url)
                            .then(function(response) {
                             $scope.result = response.data;     
                                });
                             };

                        });

    </script>

:)

如果有人有类似的问题，我希望这个答案会有所帮助。

Answer 3

function functionName(){
            $http.get(URL).success(function(response){

                $scope.variable = response;
            })
        }

在get（）里面放上您的网址，如果您的网址返回任何数据，那么它将转到success（）函数。