Question

我是angularjs的新手。我试图从维基百科获取数据并在前端显示它。我使用以下php代码从wiki中重新获取数据

$url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids';
$json = file_get_contents($url);
echo json_encode($json);

以下是我的控制器

var demoApp = angular.module('demoApp',['ngRoute']);
demoApp.controller('SimpleController',function ($scope,$http){
    $http.post('server/view1.php').success(function(data){
        $scope.info = data;
    });
});

我的 html 如下

<html ng-app="demoApp">
<head>
    <title> AngularJS Sample</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
</head>
<body>
    <div ng-controller="SimpleController">
        {{info.query}} // I dont know if this is right
    </div>
</body>
</html>

我想显示在前端检索但未显示的所有内容。我不知道我做错了什么。我是angularjs的新手。

Answer 1

跳过PHP部件并使用带有以下参数的Angular JSONP：

format=json
callback=JSON_CALLBACK

所以Angular可以理解并解析Wiki答案：

$http({
    url: 'http://de.wikipedia.org/w/api.php?action=query&list=random&rnlimit=1&rawcontinue&format=json&callback=JSON_CALLBACK',
    method: 'jsonp'
}).success(function(response) {
    console.log(response);
    $scope.response = response;
});

这也适用于action=parse来获取文章。

如果要在页面上显示原始json响应，请使用json过滤器：

<pre>{{ response | json }}</pre>

Answer 2

使用给定的URL，您将获得JSON格式的响应。为什么编码JSON响应JSON？这不是必需的，所以跳过那一部分。

<?php
$url ='http://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids';
$json = file_get_contents($url);
echo json;
?>

只需打开the url，即可看到响应。

在您的示例中，您的PHP代码非常无用。也许您可以直接在控制器中使用API：

$http.get('http://en.wikipedia.org/w/api.php?[....]').success(function(data){
    $scope.info = data;
});

Answer 3

我终于找到了答案。

<强> HTML

<html ng-app="demoApp">
    <head>
        <title> AngularJS Sample</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script src="http://code.angularjs.org/1.2.1/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div ng-controller="SimpleController">
            <div ng-bind-html='info'></div>
        </div>
    </body>
</html>

<强>控制器

var demoApp = angular.module('demoApp',['ngSanitize']);
demoApp.controller('SimpleController',function ($scope,$http){
    $http.post('server/view1.php').success(function(data){
        $scope.info = data;
    });
});

<强> PHP

$url = 'http://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=Sachin_Tendulkar&format=json&redirects&inprop=url&indexpageids';
$jsonString = json_decode(file_get_contents( $url ),true);
$pageData = $jsonString['query']['pages'][57570]['extract'];
echo $pageData;

从Wikipedia检索数据并使用angularjs显示它

3 个答案: