Javascript 困惑于维基百科api搜索freecodecamp

我正在尝试编写一个代码，在其中输入一个单词，单击按钮（稍后我将通过按“返回”按钮添加提交代码），您将得到10个与您输入的单词相关的结果。每个结果都会有一个标题/url和一个描述（基本上，我认为是页面中的第一句话？）。我试着用它来找出我需要什么，但结果并不是我想要的。我仍然没有得到

list=search

和

generator=search

之间的区别，因为它们都返回结果。然而，当我在json中将标题称为data.search[I].title和description（？）称为data.search[I].snippet时，使用

list=search

似乎取得了更大的成功。但是，当我使用

generator=search

时，无法调用信息。的文档太混乱了。。。基本上，我想调用信息提取，这似乎只有在我使用

generator=search

时才会发生。但是，当我试图将标题称为

data.pages[I].title

并将描述称为

data.pages[I].extract时，出现了一个错误

这是我的密码：


$（文档）.ready（函数（）{
函数getWord（）{
var关键字=$（“#搜索关键字”）.val（）；
$.ajax({
url:“https://en.wikipedia.org/w/api.php?",
键入：“GET”，
数据类型：“jsonp”，
数据：{
操作：“查询”，
格式：“json”，
道具：“摘录”，
列表：“搜索”，
搜索：关键字，
例如：“1”，
exlimit:'10'，
exintro:'1'，
解释文字：“1”
},
成功：功能（数据）{
控制台日志（数据）；
$（“#articlearea”）.empty（）；
对于（变量i=0；i<10；i++）{
$（“#articlearea”）.append（“”+data.query.search[i].title+'
'+data.query.search[i].extract+“”）；
}
}
});
};
美元（“#submitbtn”）。点击（“点击”，获取单词）；
});
@导入url（'https://fonts.googleapis.com/css?family=Amiko:400,600');
身体{
位置：相对位置；
字体系列：“Amiko”，无衬线；
}
html，正文{
身高：100%；
保证金：0；
背景色：#40e0d0；
}
.包装纸{
文本对齐：居中；
位置：相对位置；
}
.集装箱{
宽度：75%；
利润率：30px自动0；
}
.货柜a{
颜色：#ffffff；
字体大小：1.1米；
文字装饰：无；
边缘底部：10px；
显示：块；
}
输入{
边框：1px实心#ffffff；
边界半径：4px；
填充：5px 8px；
字体大小：1.3em；
}
#提交{
位置：相对位置；
z指数：1；
左：-32px；
顶部：-2px；
颜色：#7b；
光标：指针；
宽度：0；
}
.fa搜索{
字体大小：1.3em；
}
generator=search
将不起作用，因为这不是一个选项您有选项
generator=allpages
，
generator=links
。生成器为您提供搜索词的所有页面或所有链接。
search
术语实际上与
gapfrom=
一起使用。以下是一个工作示例：

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


$（文档）.ready（函数（）{
函数getWord（）{
var关键字=$（“#搜索关键字”）.val（）；
$.ajax({
url:“https://en.wikipedia.org/w/api.php?",
键入：“GET”，
数据类型：“jsonp”，
数据：{
操作：“查询”，
格式：“json”，
道具：“信息”，
生成器：“所有页面”，
inprop:'url'，
gapfrom：关键字，
gaplimit:“3”
},
成功：功能（数据）{
var pages=Object.keys（data.query.pages）；
$（“#articlearea”）.empty（）；
pages.forEach（第=>{
$（“#articlearea”）.append（“”+JSON.stringify（data.query.pages[page].title）+’
'+JSON.stringify（data.query.pages[page].canonicalurl）+’；
})
}
});
};
美元（“#submitbtn”）。点击（“点击”，获取单词）；
});
@导入url（'https://fonts.googleapis.com/css?family=Amiko:400,600');
身体{
位置：相对位置；
字体系列：“Amiko”，无衬线；
}
html，
身体{
身高：100%；
保证金：0；
背景色：#40e0d0；
}
.包装纸{
文本对齐：居中；
位置：相对位置；
}
.集装箱{
宽度：75%；
利润率：30px自动0；
}
.货柜a{
颜色：#ffffff；
字体大小：1.1米；
文字装饰：无；
边缘底部：10px；
显示：块；
}
输入{
边框：1px实心#ffffff；
边界半径：4px；
填充：5px 8px；
字体大小：1.3em；
}
#提交{
位置：相对位置；
z指数：1；
左：-32px；
顶部：-2px；
颜色：#7b；
光标：指针；
宽度：0；
}
.fa搜索{
字体大小：1.3em；
}
我更改了表单，添加了一个“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>


函数getWord（）{
var关键字=$（“#搜索关键字”）.val（）；
$.ajax({
url:“https://en.wikipedia.org/w/api.php?",
键入：“GET”，
数据类型：“jsonp”，
数据：{
操作：“查询”，
格式：“json”，
道具：“摘录”，
列表：“搜索”，
搜索：关键字，
例如：“1”，
exlimit:'10'，
exintro:'1'，
解释文字：“1”
},
成功：功能（数据）{
控制台日志（数据）；
$（“#articlearea”）.empty（）；
对于（变量i=0；i<10；i++）{
$（“#articlearea”）.append（“”+data.query.search[i].title+“”）；
}
}
});
};
美元（“#submitbtn”）。点击（“点击”，获取单词）；
实际上，我要求的是从
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>');