Question

我正在尝试编写一个输入单词的代码，单击按钮（我稍后会通过按“返回”按钮添加代码以进行提交），并获得与输入的单词相关的10个结果。每个结果都有一个标题/网址和一个描述（基本上，我认为页面中的第一句话？）。我试图用API Sandbox来弄清楚我需要什么，但我得到的结果并不是我想要的。我仍然没有区分list=search和generator=search，因为它们都返回结果。但是，当我在json中将标题称为 data.search [i] .title 和描述（？）作为数据时，我使用list=search时似乎取得了更大的成功.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',
	      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"
}

＆＃13;

$(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);

});

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我更改了表单以添加＆＃34;提交＆＃34;自动运行getWords（）函数。我还将操作更改为javascript：void（）以避免刷新。我还更改了你的getWord（）并将其从document.ready函数中删除，因为它无法从表单＆＃34; onsubmit＆＃34;中访问。因为它是。现在，代码应该正常运行。如果您需要更多帮助，请发表评论。

<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

3 个答案: