试图从维基百科了解 .getJSON 的结果

Question

所以我在维基百科上做一个 API 调用，特别是在这个结构的 link 中：

https://en.wikipedia.org/w/api.php?action=opensearch&search=test&limit=10&namespace=0&format=json

其中 "test" 是搜索查询 - 到目前为止还不错。

不幸的是，我似乎无法访问返回内容的任何部分。

这就是我正在尝试的，我也尝试过其他各种方法，例如 data[0]、data[1][1]、data[1][1][1] 等，但没有成功。

$.getJSON(apiCall, function(data) {
    console.log(data);
});

为什么我无法 console.log 从 api 调用中提取任何内容。

你可以在这里看到我的代码实践：http://codepen.io/scabbyjoe/pen/ZOwRAV

Answer 1

您不能在成功处理程序中 console.log，因为 AJAX GET 请求 fails/is-cancelled，因此 jQuery 不认为它成功。我认为这里有两个问题导致失败。

第一个实际上是 HTML 和 JavaScript 的组合。因为该按钮是 "submit" 类型，并且因为该按钮位于表单中，所以每次单击它时，它所在的表单都会提交。

如果您注意到，每次搜索时，页面都会重新加载。这是因为表单正在提交，但没有指定操作属性，只是重新加载找到表单的页面。

要解决此问题，请停止点击事件冒泡。处理点击事件的函数可以带一个参数，就是点击事件，你可以用它来阻止表单提交：

$("#searchButton").on("click", function(e) {
    //Stop the event (e, the first parameter, is the click event) from bubbling
    e.preventDefault();
    ...

在解决 form-submission 问题之前，您可能已经注意到对维基百科的 AJAX GET 请求被标记为已取消。这是因为页面正在重新加载，浏览器正在取消任何未完成的 AJAX 请求作为该过程的一部分。结果，成功处理程序从未被调用。

表单提交修复后，您将看到 AJAX GET 请求 returns 错误：

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=test&limit=10&namespace=0&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

您不能从您的域向另一个域发出 cross-origin AJAX GET 请求。这是您浏览器的一项安全功能。

不过，有办法解决这个问题。如果您调用的服务器支持 JSONP，您可以使用它。值得庆幸的是，维基百科的 API 确实支持 JSONP。

根据 jQuery 的 $.getJSON 文档：

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

所以，简单地附加 &callback=? - 就是那个，问号和所有 - 到你正在向其发出 AJAX GET 请求的 URL 的末尾，你应该会看到该请求成功完成。

您现在应该看到成功处理程序已成功运行。

您现在可以添加一个 console.log 并查看从 GET 请求返回的数据。

console.log(data[1]); 将为您提供请求返回的文章标题列表（数据[0] 应该是搜索查询本身）。

希望对您有所帮助！

Answer 2

请更改

$("#searchButton").on("click", function(apiCall){

至

$("form").on("submit", function(e){
    e.preventDefault();

请在您的本地主机中尝试

Answer 3

使用您正在使用的代码笔片段的 https
- https://codepen.io/scabbyjoe/pen/ZOwRAV
在代码的html部分，去掉type='submit'部分。它 post 返回站点。
（不确定，反正）删除将url分配给apiCall

除此之外，代码将有效

试图从维基百科了解 .getJSON 的结果

Trying to understanding result of .getJSON from wikipedia

api

jquery

wikipedia

getjson