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

Posted

技术标签:

【中文标题】从 Wikipedia 检索数据并使用 angularjs 显示它【英文标题】:retrieve data from Wikipedia and show it using angularjs 【发布时间】:2013-12-02 20:38:41 【问题描述】:

我是 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 的新手。

【问题讨论】:

【参考方案1】:

使用给定的 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;
);

【讨论】:

谢谢。但是数据仍然没有显示在前端。我认为我在 html 代码中做错了什么。但不知道是什么。 在浏览器中查看控制台(Chrome 中的 F12)。它将为您提供有关发布/获取请求和客户端 (js) 错误的有用信息。 当我直接在控制器中尝试 API 时,它在控制台上显示 No 'Access-Control-Allow-Origin' header is present on the requested resource 错误【参考方案2】:

我终于找到了答案。

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;

【讨论】:

这确实是一种解决方案。但是,似乎应该有一种方法可以在不创建 php 脚本的情况下做到这一点。【参考方案3】:

跳过 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>

【讨论】:

以上是关于从 Wikipedia 检索数据并使用 angularjs 显示它的主要内容,如果未能解决你的问题,请参考以下文章

从 redshift 表中检索数据并使用 SNS 主题发送

从数据库中检索特定行并显示特定行中的所有数据并使用 php 发送 json

从 api 检索大量数据并在 UICollectionView Swift 中使用它

如何从其他站点检索 json 数据并使用 cURL 对其进行解码?

从数据库中检索 MS Word 文档并在本地保存

从 Wikipedia 获取随机摘录(Javascript,仅限客户端)