从 Angular 控制器中的 php 文件获取 JSONP 数据答案

【问题标题】：GET JSONP data from php file in Angular Controller从 Angular 控制器中的 php 文件获取 JSONP 数据
【发布时间】：2015-11-25 06:16:57
【问题描述】：

最近，我开始学习 Angular。这么多我不知道。我正在尝试从 php 文件中获取 json 数据以在 Angular 控制器中使用。但是php文件中的数据不超过。

controllers.js：

app.controller('MainCtrl',['$scope', '$resource', '$http',
function($scope, $resource,$http) {
    $http.get('/xbmc.php').success(function(data) {
        $scope.data = data;
    });
}]);

xbmc.php:

    <?
include('sys/inc/config.inc.php');
include(SMARTY_DIR.'Smarty.class.php');
include(BASE_DIR .'sys/inc/classes.inc.php');
include(BASE_DIR .'sys/inc/init.inc.php');
include(BASE_DIR .'xbmcApi.php');
$jsonData = new xbmcApi($_GET['action']);
/**
if (MEGAKINO_LOGED)
{
**/
    $json = $jsonData->getResult();
/**
}
else 
    $json = array('authStatus' => '0');
**/     
echo json_encode($json);
?>

index.html：

<body ng-controller="MainCtrl">
    <div class="wrapper">
        <h2>{{title}}</h2>
        <div class="row">
            <div class="col-md-1 col-sm-2 col-xs-4" style="margin-top: 0.5%;" ng-repeat="item in data.items">
                <div class="image" style="margin-bottom: 1%">
                    <a data-ng-href="#!/seasons/serie/{{item.id}}">
                        <img data-ng-src="/files/series/thumb-{{item.id}}.jpg" alt=""/>
                    </a>
                </div>
                <div class="info">
                    <a data-ng-href="#!/seasons/serie/{{item.id}}">
                        <b>{{item}}</b>
                        <u>Рейтинг: {{item.rate}}</u>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

$json 是否存储了正确的输出？
在 promise 函数中添加 console.log(data) 并告诉我们你看到了什么。
你用浏览器地址栏测试过你的php，它有效吗？当你使用 Angular 时，你有什么错误吗？

标签： javascript php angularjs json

【解决方案1】：

您的 php 代码告诉您，如果传递了 $_GET['action'] 参数，您的 json 将被构建：

$jsonData = new xbmcApi($_GET['action']);

但是，您没有将任何数据作为查询字符串从您的角度控制器传递。尝试类似：

app.controller('MainCtrl',['$scope', '$resource', '$http',
function($scope, $resource,$http) {
    $http({
        url: '/xbmc.php', 
        method: "GET",
        params: {action: 'some_action'}
     }).success(function(data) {
        $scope.data = data;
    });
}]);

【讨论】：

【解决方案2】：

正如@CharlieH 所说，检查控制台上的错误：

app.controller('MainCtrl',['$scope', '$resource', '$http',
function($scope, $resource,$http) {
    $http.get('/xbmc.php')
        .then(function(response) {
             $scope.data = response.data;
    })
        .catch (function(error) {
             //check for errors here
             console.log(error);
             throw error;                   
    });
}]);

.success 方法也已被弃用。我们都应该迁移到使用.then 和.catch。有关这方面的更多信息，请参阅：Deprecation of the .success and .error methods in the $http service

【讨论】：