关于维基百科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>