JQuery $.getJSON 和维基百科 API 的问题

Question

所以我正在尝试访问维基百科 API 以获取免费代码营项目。我尝试使用标准 Ajax 接口，但没有用 - 我尝试使用 .getJSON，但仍然无法使用。问题不在于我的按钮、link 或功能 - 按钮记录到控制台，link，当在浏览器中输入时，returns JSON数据，该函数当前是一个未记录的控制台日志。有时，屏幕会完全空白。

此外，CodePen 和我的浏览器的控制台都不会记录 "worked" 消息，但 Stack Overflow 会记录。这让我发疯，因为这是超级基本的。

我做错了什么？ JS，CSS，HTML在下面，this是CodePen的link。

//ready
$(document).ready(function() {
  //jquery onclick
  $("#search").on("click", function() {
    var term = $("#term").val();
    console.log(term);
//request
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + term + "&callback=?",
      function(json) {
        console.log("worked");
      }); //end getJSON
  }); //end onclick
}); //end docready

@import url('https://fonts.googleapis.com/css?family=Arimo');

#well{
  background-color:#ededed;
}

body{
  background-color:#6b6b6b;
  text-align:center;
}
h1{
  font-family: Times, Georgia, serif;
}

h5, form{
  font-family: 'Arimo', sans-serif;
}

.result{
  background-color: WHITE;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
  <header>
    <h1>Wikipedia Viewer</h1>
  </header>

  <body>
    <br>
    <div id="select">
      <h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
      <br>
      <form>
        <input type="text" id="term" name="search" placeholder="What article?">
        <button id="search">Search</button>
      </form>
      <br>
      <h5>Or search above for a specific one</h5>
    </div>
    <ul id="results">
      
    </ul>
  </body>
</div>

Answer 1

更新： 抱歉，这是我在评论中发布此答案后提到的浏览器缓存问题，这不是我的想法。问题不够清楚

it was just that Firefox was being weird and Chrome had cached my page.

解析您在回调中调用的维基百科响应数组json。

json[0] 是搜索词。
json[1]数组是标题。
json[2] 数组是描述。
json[3]数组是链接。

我误解了为什么要投反对票！

这是完整的工作示例。

$(document).ready(function() {
  $("#search").on("click", function() {
    var term = $("#term").val();
    //request
    $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&search=" + encodeURIComponent(term) + "&callback=?",
      function(json) {
        $("#results").html("");
        $("#results").append("<span>" + json[1].length + " Search results for \"" + term + "\"</span>");
        for (var i = 0; i < json[1].length; i++) {
          $("#results").append("<li><h3><a href='" + json[3][i] + "'>" + json[1][i] + "</a></h3><p>" + json[2][i] + "</p></li>");
        }
      }); //end getJSON
  }); //end onclick
}); //end docready

@import url('https://fonts.googleapis.com/css?family=Arimo');
 #well {
  background-color: #ededed;
}
body {
  background-color: #6b6b6b;
  text-align: center;
}
h1 {
  font-family: Times, Georgia, serif;
}
h5,
form {
  font-family: 'Arimo', sans-serif;
}
.result {
  background-color: WHITE;
}
li {
  list-style: none;
  text-align: left;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="well">
  <header>
    <h1>Wikipedia Viewer</h1>
  </header>

  <body>
    <br>
    <div id="select">
      <h5><a href="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" target="_blank">Click for a random article</a></h5>
      <br>
      <form>
        <input type="text" id="term" name="search" placeholder="What article?">
        <button id="search">Search</button>
      </form>
      <br>
      <h5>Or search above for a specific one</h5>
    </div>
    <ul id="results">
    </ul>
  </body>
</div>

JQuery $.getJSON 和维基百科 API 的问题

Trouble with JQuery $.getJSON and Wikipedia API

javascript

jquery

wikipedia-api