FCC维基百科查看器无法接收数据

时间:2018-02-12 21:30:48

标签: javascript jquery json jsonp

我在从mediawiki api获取任何响应数据时遇到了一些严重问题。

我正在尝试进行freecodecamp维基百科查看器挑战,我在这里编码:

https://codepen.io/dceaser334/pen/zpQXOJ

我到目前为止所做的就是获取数据并使用以下请求将其打印到控制台:

$('.search-button').on('click', function() {

  var searchInput = $('.search-input').val();

  $.getJSON('https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=' + searchInput + '&format=json&callback=?', function(data) {

  console.log(data);

  });
});

我到目前为止所做的就是获取数据并使用该请求将其打印到控制台。

我在firefox中收到此错误:

  

使用来源加载失败   “https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=jordan&format=json&callback=jQuery32105036538970753343_1518470620925&_=1518470620926”。   的index.html:1

没有任何内容加载到控制台,似乎请求被阻止。

我尝试过使用origin=*,这也没什么区别。

我有点迷失,因为这个项目有类似的GET请求代码,并且完美运行:

https://codepen.io/luckyguy73/pen/GqPzZO?editors=1010

$("#searchWiki").click(function(){
    var q = document.getElementById("searchid").value;
        $('#results').html('');                
                $.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch=" + q, function(data){
                    $('#results').append('<h2>Top 15 Wiki Search Results for "' + q + '"</h2>');
                    $.each(data.query.pages, function (i) {
                        $('#results').append("<p><a href='https://en.wikipedia.org/?curid=" + data.query.pages[i].pageid + 
                            "' target='_blank'>" + data.query.pages[i].title + "</a></p>");
                    });

                });
            });

关于我在这里做错了什么想法?

由于

1 个答案:

答案 0 :(得分:0)

我是这样做的。也许你会受到分析我的代码的启发?

( function ( $ ) {
  "use strict";

  $(document).ready(function(){

    function loadData() {
        $(".information").text(""); // Reset data before new search.
        $(function whiteFirst() {
            const query = $(".wiki_query").val();
            const myFirstWikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search=";
            const mySecondWikiUrl = "&format=json&callback=wikiCallback";
            const wikiUrl = myFirstWikiUrl + query + mySecondWikiUrl;
            // MY WIKIPEDIA AJAX GOES HERE - TOP
            const wikiRequestTimeout = setTimeout(function() {
                $(".small-information").html("An error occurred! Application couldn't get Wikipedia resources!");
            }, 5000); // This is 5 seconds!
            $.ajax({
                url: wikiUrl,
                dataType: "jsonp",
                type: "GET",
            }).done(function(result) {

                const itemsOne = [];
                const itemsTwo = [];
                const itemsThree = [];

                $(result[1]).each(function(index, value) {
                    itemsOne.push(value);
                });

                $(result[2]).each(function(index, value) {
                    itemsTwo.push(value);
                });

                $(result[3]).each(function(index, value) {
                    itemsThree.push(value);
                });

                $(".information").hide();
                $(".results").hide();

                for (let i = 0; i < itemsOne.length; i++) {
                    $(".information").append("<a class='title' href=" + itemsThree[i] + " target='_blank'><div class='result'><p class='title' id='boldTitle'>" + itemsOne[i] + "</p><p>" + itemsTwo[i] + "</p></div></a>");
                }

                if (itemsOne.length === 0) {
                  $(".information").html("Nothing found!");
                }

                $(".results").show();
                $("body,html").animate({
                    'scrollTop': $(".results").offset().top
                }, 2000);    

                $(".information").fadeIn("slow");
                clearTimeout(wikiRequestTimeout); // This will prevent timeout from happening!

            });
            // MY WIKIPEDIA AJAX GOES HERE - BOTTOM
        });
        return false;
    };

    $(".whiteButton").click(loadData);
    $(".results").hide();

    $(function() {
      const offset = -50; // Optional offset
      $(".back").click(function() {
        $("html, body").animate({
            scrollTop: $(".cover").offset().top + offset
        }, 750);
      });
    });

  });

} ( jQuery ) );