使用 ajax 从维基百科 api 渲染图像

Question

我正在尝试渲染维基百科文章的图像。

例如来自 https://de.wikipedia.org/wiki/Appendizitis

为了避免跨源策略，我使用代理：

function imageWp() {

var word = 'Appendizitis';

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var https = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = https + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});

$.get(
    'https://de.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + word + '&callback=?',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});
}

如何只解析图片？或者，javascript、jquery 和 ajax 有更好的方法吗？我不想使用 PHP.

Answer 1

我会使用正则表达式从响应中提取我想要的内容。

像这样：

$.get(
    'https://de.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + word + '&callback=?',
    function (response) {
        var resp = $.parseJSON(response);
        var text = resp.parse.text['*'];
        re = /img.*?src="(.*?)"/g
        while( match = re.exec(text)) { 
           console.log(match[1]); 
        }
});

在 match[1] 中，您将拥有图像的 "src" 属性。这段代码并不完美，但它应该告诉你我的意思。

Answer 2

function imageWp() {

    var word = 'Appendizitis';

    $.ajaxPrefilter(function (options) {
        if (options.crossDomain && jQuery.support.cors) {
            var https = (window.location.protocol === 'http:' ? 'http:' : 'https:');
            options.url = https + '//cors-anywhere.herokuapp.com/' + options.url;
        }
    });

    $.get(
        'https://de.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + word + '&callback=?',

    function (response) {
        var m;
        var urls = [];
        var regex = /<img.*?src=\"(.*?)\"/gmi;

        while (m = regex.exec(response)) {
            urls.push(m[1]);
        }

        urls.forEach(function (url) {
            $("#viewer").append('<img src="' + window.location.protocol + url + '">');
        });
    });
}

imageWp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer"></div>

Answer 3

查看维基百科 API:

http://en.wikipedia.org/wiki/Special%3aApiSandbox#action=query&prop=images&format=json&titles=Appendicitis&uselang=de

您可以查询文章并在 JSON 中获取图像列表：

{
    "warnings": {
        "query": {
            "*": "..."
        }
    },
    "query-continue": {
        "images": {
            "imcontinue": "70980|Stomach_colon_rectum_diagram-en.svg"
        }
    },
    "query": {
        "pages": {
            "70980": {
                "pageid": 70980,
                "ns": 0,
                "title": "Appendicitis",
                "images": [
                    {
                        "ns": 6,
                        "title": "File:Acute Appendicitis.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Acute appendicitis High Power.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Appendicitis - low mag.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Appendicitis world map - DALY - WHO2004.svg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Appendix-Entfernung.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:CAT scan demonstrating acute appendicitis.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Commons-logo.svg"
                    },
                    {
                        "ns": 6,
                        "title": "File:Inflamed appendix.jpg"
                    },
                    {
                        "ns": 6,
                        "title": "File:SonoAppendizitis.JPG"
                    },
                    {
                        "ns": 6,
                        "title": "File:Stitches post appendicitis surgery.jpg"
                    }
                ]
            }
        }
    }
}

使用 ajax 从维基百科 api 渲染图像

Render Images from wikipedia api with ajax

javascript

api

ajax

jquery

wikipedia