如何將JSON格式的Yii2框架中的數據顯示到IONIC框架（移動應用程序）中？

Question

我是離子框架以及Yii2框架的新手。 在Yii2框架中，我正在研究RESTful API項目，該項目將數據庫中的數據顯示為JSON格式。 這是將數據提取為JSON格式后的結果。

{
   "user_id": 1,
   "username": "linux",
   "nicename": "backtrack"
}

因此，我現在想做的是從JSON格式中獲取一些數據，並使用離子框架在移動應用程序中顯示。 我在瀏覽器上嘗試過，但沒有數據顯示。 在檢查元素控制台，我收到此錯誤：

XMLHttpRequest cannot load http://localhost/basic/web/index.php/users/1?key1=value&key2=value. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

這是我在myApplication ionic文件夾中的app.js代碼：

var App = angular.module('starter',['ionic'])
.run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
           cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   }
      if (window.StatusBar) {
       // org.apache.cordova.statusbar required
       StatusBar.styleLightContent();
}
  });
});

App.controller('AppCtrl', function($scope, $http){
$scope.getData = function() {
    $http.get('http://localhost/basic/web/index.php/users/1', {params: {"key1": "value", "key2": "value"}})
        .success(function(data){
            $scope.username = data.username;
        })
        .error(function(data){
            alert("ada prob !");
        });
  }
});

這是myApplication ionic文件夾中的index.html ：

<!doctype html>
<html>
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Ikrar Potensi</title>
    <!--Ionic Libs-->
    <link rel='stylesheet' href="lib/ionic/css/ionic.css">
    <script src='lib/ionic/js/ionic.bundle.js'></script>
    <!--My app-->
    <link rel='stylesheet' href='css/style.css'>
    <script src='js/app.js'></script>
    <script src='cordova.js'></script>

</head>
<body ng-app="starter">
    <ion-header-bar class='bar-balanced'>
        <h1 class='title'>Ikrar Potensi</h1>
        <!--<button class='button' data-ng-click='getData()'>
            <i class='icon ion-refresh'></i>
        </button>-->
    </ion-header-bar>
<ion-content ng-controller='AppCtrl'>
<button class='button' ng-click='getData()'>Do Something</button>
    <br>
            name: {{username}}
            <p>Some text</p>


</ion-content>
</body>

在將http://localhost/basic/web/index.php/users/1放在app.js之前，我嘗試將https://graph.facebook.com/profile-name放在chrome上運行，數據將是已顯示取決於我要顯示的內容。 但是，當我把localhost / ...錯誤顯示在檢查元素控制台上時。

錯誤的含義是什么？如何解決？ 我需要你們的幫助。

Answer 1

嘗試在您的谷歌瀏覽器上安裝CORS擴展程序

Answer 2

我有基於.htaccess的解決方案

在您的網絡文件夾中嘗試類似的操作：

<IfModule mod_headers.c>
   Header Always set Access-Control-Allow-Origin "YOUR_HOST"
   Header set Access-Control-Allow-Credentials true
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD"
   Header set Access-Control-Allow-Headers "Authorization, Content-Type, Response-Type, If-Modified-Since"
   Header set Access-Control-Expose-Headers "Content-disposition, X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count, Link"
</IfModule>

它僅允許一個主機。

Answer 3

出於安全原因，瀏覽器無法將Ajax請求發送到另一個站點。 為此，您應該使用JSONP。

試試這個代碼。

$http.jsonp('http://localhost/basic/web/index.php/users/1?callback=JSON_CALLBACK', {params: {"key1": "value", "key2": "value"}})
    .success(function(data){
        $scope.username = data.username;
    })
    .error(function(data){
        alert("ada prob !");
    });

}

如何將JSON格式的Yii2框架中的數據顯示到IONIC框架（移動應用程序）中？

問題描述

3 個解決方案

解決方案1
0 2015-05-10 16:39:32

解決方案2
0 2015-05-10 20:20:31

解決方案3
0 2015-05-11 07:15:29

如何將JSON格式的Yii2框架中的數據顯示到IONIC框架（移動應用程序）中？

問題描述

3 個解決方案

解決方案1 0 2015-05-10 16:39:32

解決方案2 0 2015-05-10 20:20:31

解決方案3 0 2015-05-11 07:15:29

解決方案1
0 2015-05-10 16:39:32

解決方案2
0 2015-05-10 20:20:31

解決方案3
0 2015-05-11 07:15:29