对维基百科感到困惑 api 搜索 freecodecamp

Question

我正在尝试编写这样的代码，其中一个人输入一个词，单击按钮（稍后我将添加代码以通过按 "return" 按钮提交），你会得到 10 个与以下内容相关的结果您输入的单词。每个结果都会有一个 title/url 和一个描述（我认为基本上是页面中的第一句话？）。我尝试使用 API Sandbox to figure out what I need but the results I got wasn't what I was looking for. I also still don't get the difference between list=search and generator=search since they both return the results. However, it seems that I got more success when I use list=search when I call the title in json as data.search[i].title and description(?) as data.search[i].snippet. However, I'm unable to call the info when I use generator=search. The documentation for 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',
       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 将不起作用，因为这不是您可以选择 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 2

我更改了表单以添加 "on submit" 以自动运行您的 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>

Answer 3

实际上，我想问的是从 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>');

对维基百科感到困惑 api 搜索 freecodecamp

Confused about Wikipedia api search freecodecamp

javascript

jquery

mediawiki-api