Question

大家好，我正在尝试构建JavaScript文件，根据输入字段中的搜索值从维基百科中提取信息，然后使用链接等标题显示结果，以便用户可以单击该链接并阅读相关内容。到目前为止，我从Mediawiki（维基百科）获得了（JSON）格式的请求信息，但我无法在页面上显示它。我想我在JavaScript数组后有一个错误代码。我是JavaScript新手任何帮助，或者提示将不胜感激。对不起，我的剧本很乱，但我正在尝试很多。感谢。

            var httpRequest = false ;
        var wikiReport;


        function getRequestObject() {
            try {
                httpRequest = new XMLHttpRequest();
            } catch (requestError) {
                return false;
            }
            return httpRequest;
        }

        function getWiki(evt) {
            if (evt.preventDefault) {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        var search = document.getElementsByTagName("input")[0].value;//("search").value;
            if (!httpRequest) {
                httpRequest = getRequestObject();
            }
            httpRequest.abort();
            httpRequest.open("GET", "https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=3&generator=search&origin=*&gsrsearch=" + search , true);//("get", "StockCheck.php?t=" + entry, true);
            //httpRequest.send();
            httpRequest.send();
            httpRequest.onreadystatechange = displayData;
        }

        function displayData() {
        if(httpRequest.readyState === 4 && httpRequest.status === 200) {
            wikiReport = JSON.parse(httpRequest.responseText);//for sunchronus request
            //wikiReport = httpRequest.responseText;//for asynchronus request and response
            //var wikiReport = httpRequest.responseXML;//processing XML data
            var info = wikiReport.query;
            var articleWiki = document.getElementsByTagName("article")[0];//creating the div array for displaying the results
            var articleW = document.getElementById("results")[0];
        for(var i = 0; i < info.length; i++)
        {

    var testDiv = document.createElement("results");
    testDiv.append("<p><a href='https://en.wikipedia.org/?curid=" + query.pages[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>");
    testDiv.appendChild("<p><a href='https://en.wikipedia.org/?curid=" + query.info[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>");

        var newDiv = document.createElement("div");
        var head = document.createDocumentFragment();
        var newP1 = document.createElement("p");
        var newP2 = document.createElement("p");
        var newA = document.createElement("a");

        head.appendChild(newP1);

        newA.innerHTML = info[i].pages;
        newA.setAttribute("href", info[i].pages);
        newP1.appendChild(newA);
        newP1.className = "head";
        newP2.innerHTML = info[i].title;
        newP2.className = "url";
        newDiv.appendChild(head);
        newDiv.appendChild(newP2);

        articleWiki.appendChild(newDiv);
        }
        }
        }

        //
        function createEventListener(){
        var form = document.getElementsByTagName("form")[0];
        if (form.addEventListener) {
            form.addEventListener("submit", getWiki, false);
        } else if (form.attachEvent) {
            form.attachEvent("onsubmit", getWiki);
        }
        }

        //createEventListener when the page load
        if (window.addEventListener) {
        window.addEventListener("load", createEventListener, false);
        } else if (window.attachEvent) {
        window.attachEvent("onload", createEventListener);
        }

Mediawiki api链接

https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=3&generator=search&origin= *＆安培; gsrsearch =

Answer 1

你错了一些观点。 1） var articleW = document.getElementById（“results”）[0];

这是错误的。这将返回一个元素是对Element对象的引用，如果具有指定ID的元素不在文档中，则返回null。 Doc就在这里（https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById）

正确的答案应该是： var articleW = document.getElementById（“results”）;

2）

var info = wikiReport.query;
for(var i = 0; i < info.length; i++) {}

info是对象。它不是数组，你不能for循环来获取子值。
wikiReport.query不是正确的维基数据。正确的数据应为wikiReport.query.pages。并使用for-in-loop来获取子元素

正确答案：

var pages = wikiReport.query.pages
for(var key in pages) {
    var el = pages[key];
}

3）这也是不正确的

testDiv.appendChild("<p><a href='https://en.wikipedia.org/?curid=" + query.info[i].pageid + "' target='_blank'>" + query.info[i].title + "</a></p>");

Node.appendChild()方法将节点添加到指定父节点的子节点列表的末尾。您正在使用该方法添加字符串。这将导致错误。将其更改为node元素或使用append方法

我已经创建了一个示例测试。您可以在https://codepen.io/anon/pen/XRjOQQ?editors=1011

下面的链接中查看

mediawiki api无法显示数组的结果

1 个答案: