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（）函數。