将JSON加载到角度

我是Angular.js的新成员。我试图从我的本地url http://85.96.243.31/admin.productss/searchwithjson获取json。 JSON内容是：将JSON加载到角度

[ 
    { 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1.png", 
     "productid": "3", 
     "price": "0.01", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "1 Cent", 
     "isbundle": 0, 
     "subcategory": "Cat2", 
     "taxincluded": 0, 
     "brand": "erer", 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/3-kdd4eesv-erer-1-cent-1_thumb.png" 
    }, 
    { 
     "productid": "1", 
     "isactive": 1, 
     "isbundle": 0, 
     "taxincluded": 0, 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1_thumb.png", 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/1-gu60axs2-erer-model-1.png", 
     "price": "15.00", 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "model", 
     "subcategory": "Cat2", 
     "sku": "12", 
     "brand": "erer" 
    }, 
    { 
     "fullsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1.png", 
     "productid": "4", 
     "price": "123.00", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "2", 
     "model": "qwert", 
     "isbundle": 0, 
     "subcategory": "Cat1", 
     "taxincluded": 0, 
     "brand": "erer", 
     "thumbnailsizeurl": "/uploads/incubout_denemeshop/1/product/4-sjy7xxyh-erer-qwert-1_thumb.png" 
    }, 
    { 
     "productid": "2", 
     "price": "13.65", 
     "isactive": 1, 
     "brandid": "1", 
     "subcategoryid": "1", 
     "model": "yancı", 
     "isbundle": 0, 
     "subcategory": "Cat2", 
     "taxincluded": 0, 
     "brand": "erer" 
    } 
]

这里是我的代码：

<!DOCTYPE html> 
    <html> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <body> 
    <body ng-app="MyApp"> 
     <div ng-controller="PostsCtrl"> 
     <ul ng-repeat="post in posts"> 
      <li>{{post.fullsizeurl}}</li> 
     </ul> 
     </div> 
    <script> 
    var app = angular.module("MyApp", []); 

    app.controller("PostsCtrl", function($scope, $http) { 
     $http.get('http://85.96.243.31/admin.productss/searchwithjson'). 
     success(function(data, status, headers, config) { 
      $scope.posts = data; 
     }). 
     error(function(data, status, headers, config) { 
      // log error 
     }); 
    }); 
    </script> 
    </body> 
    </html>

我无法得到的产品fullsizeurls。这段代码有什么问题？

来源

2015-05-11 GaripTipici

你正在运行脚本后ng-repeat ...也许多数民众赞成在问题 – Altoyyr

请检查控制台的错误...我疯狂的猜测是：违反SOP – devnull69

您是否启用服务JSON的计算机上的CORS？ – Jack

我试过你的代码，发现问题在于违反了从不同域拉取数据的规则。

你确定你从正在执行html的相同域名拉取JSON文件吗？ - 我已经尝试抓取您的JSON文件并使用.html文件进行存储，并在相同的文件夹中完美地运行它。

如果您未能做到，将在控制台日志中遇到以下错误： XMLHttpRequest无法加载http://localhost/searchwithjson。请求的资源上没有“Access-Control-Allow-Origin”标题。因此不允许原产地'null'访问。

或者正如其他人建议启用CROS（跨源资源共享）能够从不同位置加载JSON。

来源

2015-05-11 12:21:17 sumone

我检查了控制台，并且出现一个错误“XMLHttpRequest无法加载http：//localhost/admin.productss/searchwithjson。请求的资源上没有'Access-Control-Allow-Origin'标头Origin'http：//85.96因此不允许访问.243.31'。“所以你是对的。我如何允许加载json？ – GaripTipici

取决于什么是适合您的解决方案。如果您为自己测试此脚本，则可以通过Chrome中的插件（https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi）或其他浏览器的类似方法来允许CROS。但是，我相信不能完成申请所有访问者的事情。所以唯一真正的解决方案是在相同的域名下执行.html，或者从后端的逻辑中拉出JSON，然后将其分发给访问者。 – sumone

忘了提及还有第三种解决方案，其中如果您有权访问JSON文件所在的服务器。在获取JSON时，您可以在响应下的Access-Control-Allow-Origin中指定您的网站URL。这样，当浏览器从JSON所在的服务器获得响应时，浏览器会识别您的网站URL，其中.html文件位于哪里，如果这两个匹配项能够正常工作。 User @apsillers在他的帖子中很好地描述了这里：http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work?answertab=active#tab-top – sumone

将JSON加载到角度

回答

相关问题