Angularjs - 使用$ http从远程服务器显示数据

时间:2016-10-14 13:38:00

标签: javascript angularjs http jhipster

我想发送一个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>

3 个答案:

答案 0 :(得分: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(){...});

答案 1 :(得分:1)

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

<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>

:)

如果有人有similer问题,我希望这个答案会有所帮助.. 欢呼声

答案 2 :(得分:0)

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

                $scope.variable = response;
            })
        }

在get()里面放你的url,如果你的url返回任何数据,那么它将转到success()函数。