如何将JSON格式的Yii2框架中的数据显示到IONIC框架（移动应用程序）中？
[英]how to display data from Yii2 framework which is JSON format into IONIC framework (mobile application)?
问题描述
I am newbie in ionic framework and also Yii2 framework. 
我是离子框架以及Yii2框架的新手。 In Yii2 framework I'm working on RESTful API project which is display data from database into JSON format. 在Yii2框架中，我正在研究RESTful API项目，该项目将数据库中的数据显示为JSON格式。 This is the result after fetch data into JSON format. 这是将数据提取为JSON格式后的结果。
{
"user_id": 1,
"username": "linux",
"nicename": "backtrack"
}
So, what I want to do right now is get some data from JSON format and display at mobile application using ionic framework. 因此，我现在想做的是从JSON格式中获取一些数据，并使用离子框架在移动应用程序中显示。 I have tried at browser but no data is displayed. 我在浏览器上尝试过，但没有数据显示。 At inspect element console I got this error: 在检查元素控制台，我收到此错误：
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.
This is my code at app.js inside myApplication ionic folder: 这是我在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 !");
});
}
});
This is my index.html inside myApplication ionic folder: 这是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>
Before I put http://localhost/basic/web/index.php/users/1 at app.js, I try put https://graph.facebook.com/profile-name and run at chrome, the data will be DISPLAYED depend on what I want to display. 在将http://localhost/basic/web/index.php/users/1放在app.js之前，我尝试将https://graph.facebook.com/profile-name放在chrome上运行，数据将是已显示取决于我要显示的内容。 But, when I put localhost/... error shown at inspect element console. 但是，当我把localhost / ...错误显示在检查元素控制台上时。
What is the meaning of the error and how to fix it? 错误的含义是什么？如何解决？ I need your help guys. 我需要你们的帮助。
3 个解决方案
解决方案1
0 2015-05-10 16:39:32
尝试在您的谷歌浏览器上安装CORS扩展程序
解决方案2
0 2015-05-10 20:20:31
I have solution based on .htaccess 我有基于.htaccess的解决方案
Try something like that in your web folder: 在您的网络文件夹中尝试类似的操作：
<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>
It allows only one host. 它仅允许一个主机。
解决方案3
0 2015-05-11 07:15:29
For security reasons, Browsers can not send ajax request to another site. 出于安全原因，浏览器无法将Ajax请求发送到另一个站点。 To do this you should use JSONP. 为此，您应该使用JSONP。
Try this code. 试试这个代码。
$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 !");
});
} }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.