使用Angularjs從Grails後端獲取JSON數據

我遇到以下問題。我在Grails的控制器，它以JSON格式返回列表：使用Angularjs從Grails後端獲取JSON數據

render([tweets: tweets.take(2).collect { tweet -> [id: tweet.id, content: tweet.tweetContent]}] as JSON)

這是我urlMapping中：

"/tweets/"(controller: "tweets", parseRequest: true) { 
     action = [GET: "list"]

所以，當我剛剛在任何瀏覽器中打開這個網址，我得到的元素列表JSON格式：

{"tweets":[{"id":375238019298914304,"content":"@RonNegrita @Paolah_96 jajajajajajajajaja pues ale Negrita q nos lo has xk este del Tuit prima JAJAJAHAHAHAHA"},{"id":375238020360048640,"content":"My 38 Life Goals for next 10 years. Brewery's, Alabama Football, Concerts, Companies, Kids, Fiji, & more: http://t.co/behxfnCo5t"}]}

然後，我試圖在使用Angularjs的HTML頁面中獲取此元素。這是我的HTML頁面簡單的代碼：

<!doctype html> 
<html lang="en" ng-app id="ng-app"> 
<head> 
<title>Page Title</title> 
<script src="js/angular.js"></script> 
<script> 
function PostsCtrlAjax($scope, $http) 
{ 
$scope.tweets = [] 
$http.get('http://localhost:8080/trutto-api/tweets/').success(function(data) 
{ 
$scope.tweets = data; // response data 
}); 
} 
</script> 
</head> 
<body> 
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax"> 
<li ng-repeat="tweet in tweets>{{tweet.id}} - {{tweet.content}}</li> 
</h2> 
</div> 
</body> 
</html>

當我試圖讓在Chrome瀏覽器中的數據，我得到下列錯誤：

"Xml http request cannot load http://localhost:8080/trutto-api/tweets/. Original null is not allowed by access-control-allow-origin"

我發現問題有關這個錯誤在這裏，建議使用以下命令啓動Chrome：

"- allow-file-access-from-files".

我試過了 - 它沒有工作，返回相同的錯誤。然後我在Glassfish服務器上嘗試過 - >在Chrome中打開導致相同的錯誤。

開幕在Mozilla Firefox導致以下錯誤：

SyntaxError: JSON.parse: unexpected end of data.

應該如何解決呢？先謝謝你。

來源

2013-10-23 Tonven

不應該是'$ scope.tweets = data.tweets;'在成功回調中？ – dmahapatro

試圖改變，得到相同的錯誤。 – Tonven

這是一個CORS問題。使用this plugin來解決問題。基本上，你有你的本地開發設置的方式，ajax調用認爲你調用了不同的來源（域）的請求，這是不允許的。

來源

2013-10-23 19:47:26 Gregg

謝謝！有用。我得到的JSON對象，它不顯示在HTML頁面上，但這是另一個問題:) – Tonven

非常感謝你@Gregg，它適用於我。 –

使用Angularjs從Grails後端獲取JSON數據

回答

相關問題