如何显示对视图的 JSON 响应，我做错了什么？答案

【问题标题】：How to display JSON response to the view, what am i doing wrong?如何显示对视图的 JSON 响应，我做错了什么？
【发布时间】：2025-12-31 22:50:01
【问题描述】：

我昨天刚开始学习 AngularJS，并构建了一个应用程序来练习显示用户在搜索栏中输入的图像。

到目前为止我的代码

HTML

<body>

  <div id="content" ng-app="FlickerApp" ng-controller="MainController">

        <h3>Search images in real time!</h3>

          <input type="text" ng-model="searchPic" />
          <button class="btn btn-primary" ng-click="showPics()">Search</button>

        <div id="flickerPics" >
          <ul ng-repeat="ph in data.photo">
            <li>
              {{ ph.id }}
              {{ response }}
              <img src="https://farm{{ ph.farm }}.staticflickr.com/{{ ph.server}}/{{ ph.id}}_{{ph.secret}}.jpg" 
              style="width:304px;height:228px;">
            </li>
          </ul>
        </div>

      </div>

和 JavaScript

    angular.module("FlickerApp",[]).controller("MainController",                         
    function($scope, $http){

    $scope.showPics = function () {

    $http.get("https://api.flickr.com/services/rest/?   method=flickr.photos.search&api_key=[API_KEY_HERE]&tags="  +$scope.searchPic+  "&in_gallery=1&is_getty=1&per_page=5&format=json&nojsoncallback=1")
.success(function(data){
  $scope.data = data.photos;
}).error(function(data, status){
    $scope.response = data + status;
    });
    }

    });

我没有输入 API 密钥，因为我已经手动测试过，所以该 url 有效。

我正在 JSFiddle 上测试这个

【问题讨论】：

你能放一个来自这个 API 的响应示例吗？
我没有从 API 收到任何回复
这条线在做什么然后$scope.data = data.photos; ？
添加以 JSON 形式发回的照片对象，这个东西之所以有效，是因为我在其他应用程序中使用过它，这里唯一的区别是我添加了一个按钮并在事件中有 get 方法，就像事件没有响应
@Manu 为什么你的网址中有空格？您是否在开发人员工具的网络选项卡中检查了响应？

标签： javascript angularjs json

【解决方案1】：

我建议你升级你的 AngularJS 版本。似乎您正在使用一种较旧的设置 X-Requested-With 请求标头的标头，该标头与大多数 CORS 配置不兼容。

但是有一个解决方法。试试这个

$http.get('https://api.flickr.com/services/rest/', {
  params: {
    method: 'flickr.photos.search',
    api_key: [API_KEY_HERE],
    tags: $scope.searchPic,
    in_gallery: 1,
    is_getty: 1,
    per_page: 5,
    format: 'json',
    nojsoncallback: 1
  },
  headers: {
    'X-Requested-With': null
  }
}).then(function(response) {
  $scope.data = response.data.photos;
})

即使您升级，我也强烈建议您保持上述params 配置。不过，您不需要 header 配置。

【讨论】：

我通过在 URL 中添加 jsoncallback=JSON_CALLBACK 解决了这个问题，但我仍然不明白它是什么，我制作了一个 IOS 应用程序并使用了 nojsoncallback 并且它有效但不适用于 angularjs
@Manu 用于发出 JSONP 请求。如果你这样做，你应该使用$http.jsonp 并设置{jsonpCallbackParam: 'jsoncallback'}（除非你不升级）
是的，我使用了 jsonp，但是刚刚尝试了您的代码，它可以工作！我不明白 response.data.photos 为什么不只是 response.photos？
@Manu 你绝对应该升级 Angular。无论您使用什么，显然都是非常旧
我用plunker添加了angularjs文件<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

【解决方案2】：

//try this
 $http.get("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[API_KEY_HERE]&tags="  +$scope.searchPic+  "&in_gallery=1&is_getty=1&per_page=5&format=json&nojsoncallback=1") 
 .then(function(result){
    $scope.data = result.data;
  }).error(function(data, status){
    $scope.response = data + status;
  });
}

【讨论】：

【解决方案3】：

我认为您在请求时没有设置 X-Requested-With 标头。这个问题是由于 CORS。尝试学习CORS，在做跨域请求时非常重要。

尝试在您的请求中添加标头，如下所示：

$http({
'url':'yourUrl',
'method':'get',
'headers': { 'X-Requested-With' :'XMLHttpRequest'}
});

【讨论】：

你搞错了。 OP 的代码 is 发送 X-Requested-With 标头，但 Flickr API 拒绝该请求
是的，我的错。我没有正确阅读您的评论。 :) 不管怎样，很高兴知道你得到了这个