<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--<script src="../js/jquery-1.11.0.js"></script>-->
 <script src="angular.min.js"></script>
 <script>
  angular.module("myApp",[]).controller("test",["$scope","$http",function($scope,$http){
    $http.get("http://datainfo.duapp.com/shopdata/getGoods.php?classID=1")
    .success(function(response){
     $scope.myarr = response.sites;
    })
  }])
 </script>
</head>
<body>
 <div ng-controller="test">
  <ul>
   <li ng-repeat="data in myarr">
    <img src="{{data.goodsListImg}}"/>
    <p>名稱：<span>{{data.goodsName}}</span></p>
    <p>價(jià)格：<span>{{data.price|currency:"￥"}}</span></p>
   </li>
  </ul>
 </div>
</body>
</html>

出現(xiàn)的問(wèn)題

我們可以看到他是通過(guò)$http的get方式訪問(wèn)URL，一直訪問(wèn)不了，我將具體的response打印到控制臺(tái)上面，也使出現(xiàn)了問(wèn)題。

這個(gè)是瀏覽器的跨域造成的，之前的學(xué)習(xí)中我也不是很清楚這個(gè)，只是知道由于不是在同一個(gè)域名下面訪問(wèn)的此域名下的資源就會(huì)造成跨域。其實(shí)之前看到這個(gè)是以為請(qǐng)求的格式有問(wèn)題，返回的json數(shù)據(jù)到不了。

下面是json格式返回的數(shù)據(jù)。

按照她給我的URL，我發(fā)現(xiàn)在json數(shù)據(jù)前面有一個(gè)callback,這個(gè)是php中的回調(diào)函數(shù)，結(jié)果網(wǎng)上一搜發(fā)現(xiàn)get請(qǐng)求對(duì)于這種回調(diào)函數(shù)是沒(méi)有作用的。

解決辦法

必須使用下面的這種辦法來(lái)處理這種有callback的jsonp格式的數(shù)據(jù)。

<script>
 var myApp = angular.module("App", []);
 myApp.controller("test", function($scope, $http) {
  // 回調(diào)函數(shù)用法
  myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";
  $http.jsonp(myUrl).success(function(response) {
   console.log(response);
  });
 });
</script>

注意兩點(diǎn)：

使用$http.jsonp()請(qǐng)求數(shù)據(jù)；(解決了跨域的問(wèn)題)
在URL后面添加callback=JSON_CALLBACK字符；

這樣就可以正常的訪問(wèn)數(shù)據(jù)。其實(shí)對(duì)于json個(gè)格式的數(shù)據(jù)我們要是想知道那里有錯(cuò)誤，有一種辦法是將其打印到瀏覽器的控制臺(tái)中，這樣我們就可以看到具體的流程和結(jié)果。

完整代碼

<!DOCTYPE html>
<html ng-app="App">

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="angular.min.js"></script>
 <script>
  var myApp = angular.module("App", []);
  myApp.controller("test", function($scope, $http) {
   // 回調(diào)函數(shù)用法
   myUrl = "http://datainfo.duapp.com/shopdata/getGoods.php?callback=JSON_CALLBACK";
   $http.jsonp(myUrl).success(function(response) {
    console.log(response);
    $scope.myarr = response;
   });
  });
 </script>
</head>

<body>
 <div ng-controller="test">
  <ul>
   <li ng-repeat="data in myarr">
    <!--scr里面的angularJS不可以這樣寫-->
    <img src="{{data.goodsListImg}}" />
    <p>名稱：<span>{{data.goodsName}}</span></p>
    <p>價(jià)格：<span>{{data.price|currency:"￥"}}</span></p>
   </li>
  </ul>
 </div>
</body>

自動(dòng)將我們的JSON_CALLBACK替換成了下面的字符，這應(yīng)該是AngularJS替換的。

引用

跨域是如何解決的：

通過(guò)json來(lái)傳遞數(shù)據(jù)，靠jsonp來(lái)跨域，json是一種數(shù)據(jù)交換格式，而jsonp是一種靠開發(fā)人員的聰明才智創(chuàng)造的一種非官方跨域數(shù)據(jù)交互協(xié)議；

JSONP是如何產(chǎn)生的：

一個(gè)眾所周知的問(wèn)題，Ajax直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題，甭管你是靜態(tài)頁(yè)面、動(dòng)態(tài)網(wǎng)頁(yè)、web服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)；
不過(guò)我們又發(fā)現(xiàn)，Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；
于是可以判斷，當(dāng)前階段如果想通過(guò)純web端（ActiveX控件、服務(wù)端代理、屬于未來(lái)的HTML5之Websocket等方式不算）跨域訪問(wèn)數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理；
恰巧我們已經(jīng)知道有一種叫做JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)；
這樣子解決方案就呼之欲出了，web客戶端通過(guò)與調(diào)用腳本一模一樣的方式，來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（一般以JSON為后綴），顯而易見，服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件，目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。
客戶端在對(duì)JSON文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了，這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像AJAX，但其實(shí)并不一樣。
為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。

AngularJS中處理jsonp數(shù)據(jù)

使用$http.jsonp()函數(shù)來(lái)發(fā)送請(qǐng)求；
指定callback和回調(diào)函數(shù)名，函數(shù)名為JSON_CALLBACK時(shí)，會(huì)回調(diào)success函數(shù)，JSON_CALLBACK必須全部大寫；
也可以指定其它回調(diào)函數(shù)，但必須定義在window下的全局函數(shù)；
URL中必須添加callback;

瀏覽器是存在同源策略的，在全局層面禁止了頁(yè)面加載或執(zhí)行與自身來(lái)源不同的域的任何腳本；JSONP是一種可以繞過(guò)瀏覽器的安全限制，從不同的域請(qǐng)求數(shù)據(jù)的方法；