使用$ http.get从AngularJS中的URL读取JSON

时间:2015-12-23 17:25:40

标签: javascript python html angularjs json

我为我正在开发的应用程序编写了一个Flask后端。简而言之,当调用 http://localhost:5000/allsongs/ 时,它会返回类似(或非常类似)以下内容:

[["King And Lionheart", "Of Monsters And Men", "My Head Is An Animal", "mp3"], ["Just One Yesterday", "Fall Out Boy", "Save Rock And Roll", "mp3"], ["Laughter Lines", "Bastille", "All This Bad Blood", "mp3"]]

我正在尝试使用AngularJS编写一个Web应用程序,该应用程序从该URL读取数据并使用ng-repeat创建一个我可以搜索的列表。到目前为止,我写了这个:

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<html ng-app="myApp">

<body>

<script>
    angular.module('myApp', [])
        .controller('Songs', function Songs($scope, $http) {
    $http.get('http://localhost:5000/allmusic').then(function(response) {
      $scope.songs = response;
    });
  }
    );
</script>

<input placeholder="Search..." type="text" ng-model="search" />


<div ng-controller="Songs">
<p>{{songs}}</p>
</div>
<p ng-repeat="song in songs | filter:search | orderBy:name">{{ song }}</p>
</body>
</html>

加载页面时显示的所有内容都是页面顶部的搜索字段。

此外,当我刷新页面时,我看到我的Flask服务器被调用,所以我知道$http.get在某种程度上有效。

任何建议都会很棒!

1 个答案:

答案 0 :(得分:3)

当您不在服务器端呈现HTML时,它可能是一个CORS问题。所以你有两个选择。

  1. 添加一些返回index.html的路由器,其中包含您需要的所有Angular代码。
  2. 添加一些标头响应更改。
  3. 可悲的是我没有使用Flask的经验,但在Node.js,第二个解决方案可能看起来像那样

    app.use((req,res)=>{
        // Website you wish to allow to connect
        res.setHeader('Access-Control-Allow-Origin', '*');
    
        // Request methods you wish to allow
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    
        // Request headers you wish to allow
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    
        // Set to true if you need the website to include cookies in the requests sent
        // to the API (e.g. in case you use sessions)
        res.setHeader('Access-Control-Allow-Credentials', true);
        req.next();
      });