關於維基百科api搜索的困惑freecodecamp

Question

我正在嘗試編寫一個輸入一個單詞的代碼，點擊按鈕（稍後我會通過按下「return」按鈕來添加代碼），並且您會得到10個結果與您輸入的單詞有關。每個結果都會有一個標題/網址和一個描述（基本上，我認爲是頁面中的第一句話）。我試圖用API Sandbox來找出我需要的東西，但是我得到的結果並不是我想要的。因爲他們都返回結果，所以我還是得不到list=search和generator=search之間的區別。然而，當我在json中使用list=search作爲data.search [i] .title和說明（？）作爲data.search [i] .snippet時，似乎我獲得了更多成功。但是，當我使用generator=search時，我無法致電該信息。 MediaWiki API的文檔太混亂了...基本上，我想調用信息的提取，似乎只有在使用generator=search時纔會發生。但是，當我試圖將標題稱爲data.pages[i].title並將描述稱爲data.pages[i].extract時，我收到了錯誤。

這裏是我的代碼：

$(document).ready(function() { 
 
    
 
    function getWord() { 
 
    
 
    var keyword = $("#searchkeyword").val(); 
 
    
 
    $.ajax({ 
 
     url: "https://en.wikipedia.org/w/api.php?", 
 
     type: 'GET', 
 
     dataType: "jsonp", 
 
     data: { 
 
     action: 'query', 
 
     format: 'json', 
 
     prop: 'extracts', 
 
     list: 'search', 
 
     srsearch: keyword, 
 
     exsentences: '1', 
 
     exlimit: '10', 
 
     exintro: '1', 
 
\t  explaintext: '1' 
 
     }, 
 
     success: function(data) { 
 
     
 
     console.log(data); 
 
     $("#articlearea").empty(); 
 
     
 
     for(var i = 0; i < 10; i++) { 
 
      $("#articlearea").append('<div class="articlebox">' + data.query.search[i].title + '<br>' + data.query.search[i].extract + '</div>'); 
 
     } 
 
     
 
     
 
     } 
 
    }); 
 
}; 
 
    
 
    $("#submitbtn").on("click", getWord); 
 

 
});

@import url('https://fonts.googleapis.com/css?family=Amiko:400,600'); 
 
body { 
 
    position: relative; 
 
    font-family: 'Amiko', sans-serif; 
 
} 
 
html, body{ 
 
    height:100%; 
 
    margin: 0; 
 
    background-color: #40e0d0; 
 
} 
 
.wrapper { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.container { 
 
    width: 75%; 
 
    margin: 30px auto 0; 
 
} 
 
.container a { 
 
    color: #ffffff; 
 
    font-size: 1.1em; 
 
    text-decoration: none; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
} 
 
input { 
 
    border: 1px solid #ffffff; 
 
    border-radius: 4px; 
 
    padding: 5px 8px; 
 
    font-size: 1.3em; 
 
} 
 
#submitbtn { 
 
    position: relative; 
 
    z-index: 1; 
 
    left: -32px; 
 
    top: -2px; 
 
    color: #7B7B7B; 
 
    cursor:pointer; 
 
    width: 0; 
 
} 
 
.fa-search { 
 
    font-size: 1.3em; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a> 
 
    <form> 
 
     <input id="searchkeyword" type="text" placeholder="Search Wikipedia" /> 
 
     <i id="submitbtn" class="fa fa-search"></i> 
 
    </form> 
 
    <div id="articlearea"></div> 
 
    </div> 
 
</div>

Answer 1

其實，我所要求的是從generator=search訪問數據。我忘記了我需要兩次進入，而對於list=search，我需要進入一次。

所有我需要做的就是這個代碼添加到我的javascript面積：

var pages = data.query.pages; 

     for(var page in pages) { 
      $("#articlearea").append('<div class="articlebox"><a target="_blank" href="' + pages[page].fullurl + '"><div class="articlelink"><h2>' + pages[page].title + '</h2>' + pages[page].extract + '</div></a></div>'); 

Answer 2

generator=search不會工作，因爲這是不是一種選擇，你有選擇generator=allpages，generator=links。生成器爲您提供搜索詞的所有頁面或所有鏈接。 search術語實際上與gapfrom=一起使用。繼承人的工作例如：

{ 
    "action": "query", 
    "format": "json", 
    "prop": "links|categories", 
    "generator": "allpages", 
    "gapfrom": "Ba", 
    "gaplimit": "3" 
} 

$(document).ready(function() { 
 

 
    function getWord() { 
 

 
    var keyword = $("#searchkeyword").val(); 
 

 
    $.ajax({ 
 
     url: "https://en.wikipedia.org/w/api.php?", 
 
     type: 'GET', 
 
     dataType: "jsonp", 
 
     data: { 
 
     action: 'query', 
 
     format: 'json', 
 
     prop: 'info', 
 
     generator: 'allpages', 
 
     inprop: 'url', 
 
     gapfrom: keyword, 
 
     gaplimit: "3" 
 
     }, 
 
     success: function(data) { 
 

 
     var pages = Object.keys(data.query.pages); 
 
     
 
     $("#articlearea").empty(); 
 
     
 
     pages.forEach(page => { 
 
      $("#articlearea").append('<div class="articlebox">' + JSON.stringify(data.query.pages[page].title) + '<br>' + JSON.stringify(data.query.pages[page].canonicalurl) + '</div>'); 
 
     }) 
 

 

 
     } 
 
    }); 
 
    }; 
 

 
    $("#submitbtn").on("click", getWord); 
 

 
});

@import url('https://fonts.googleapis.com/css?family=Amiko:400,600'); 
 
body { 
 
    position: relative; 
 
    font-family: 'Amiko', sans-serif; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background-color: #40e0d0; 
 
} 
 

 
.wrapper { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.container { 
 
    width: 75%; 
 
    margin: 30px auto 0; 
 
} 
 

 
.container a { 
 
    color: #ffffff; 
 
    font-size: 1.1em; 
 
    text-decoration: none; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
} 
 

 
input { 
 
    border: 1px solid #ffffff; 
 
    border-radius: 4px; 
 
    padding: 5px 8px; 
 
    font-size: 1.3em; 
 
} 
 

 
#submitbtn { 
 
    position: relative; 
 
    z-index: 1; 
 
    left: -32px; 
 
    top: -2px; 
 
    color: #7B7B7B; 
 
    cursor: pointer; 
 
    width: 0; 
 
} 
 

 
.fa-search { 
 
    font-size: 1.3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="container"> 
 
    <a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a> 
 
    <form> 
 
     <input id="searchkeyword" type="text" placeholder="Search Wikipedia" /> 
 
     <button id="submitbtn" class="fa fa-search"></button> 
 
    </form> 
 
    <div id="articlearea"></div> 
 
    </div> 
 
</div>

Answer 3

我改變了窗體中添加了 「關於提交」 自動運行您的getWords（）函數。我還將操作更改爲javascript：void（）以避免刷新。我也改變了你的getWord（）並將它從document.ready函數中取出，因爲它不能以「onsubmit」的形式訪問它。現在，代碼應該正常運行。如果您需要更多幫助，請點評。

<div class="wrapper"> 
<div class="container"> 
<a id="randomlink" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random Wikipedia article</a> 
<form action="javascript:void(0)" onsubmit="getWord()"> 
    <input id="searchkeyword" type="text" placeholder="Search Wikipedia" /> 
    <i id="submitbtn" class="fa fa-search"></i> 
</form> 
<div id="articlearea"></div> 
</div> 
</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script type="text/javascript"> 

function getWord() { 

var keyword = $("#searchkeyword").val(); 

$.ajax({ 
    url: "https://en.wikipedia.org/w/api.php?", 
    type: 'GET', 
    dataType: "jsonp", 
    data: { 
    action: 'query', 
    format: 'json', 
    prop: 'extracts', 
    list: 'search', 
    srsearch: keyword, 
    exsentences: '1', 
    exlimit: '10', 
    exintro: '1', 
     explaintext: '1' 
    }, 
    success: function(data) { 

    console.log(data); 
    $("#articlearea").empty(); 

    for(var i = 0; i < 10; i++) { 
     $("#articlearea").append('<div class="articlebox">' + data.query.search[i].title + '</div>'); 
    } 


    } 
}); 
}; 

$("#submitbtn").on("click", getWord); 

</script>