Ajax不在CodePen中工作

Question

我正在做来自freeCodeCamp的维基百科查看器项目。由于某些原因，ajax函数无法工作，因为单击控制台时没有显示任何内容。其代码如下所示。提前感谢任何看到这个的人。

$(document).ready(function() {
  $("search").click(function() {
    var searchTerm = $("searchTerm").val();
    var url1 = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: url1,
      async: false,
      dataType: "json",
      success: function(data) {
        console.log(data);
      },
      error: function(errorMessage) {
        alert("Error");
      }
    });
  });
});

Answer 1

重新检查search和searchTerm。他们是id还是class？

1. 对于类，编写$(".search")
2. 对于id，编写$("#search")

下面的代码适用于我。

​

$(document).ready(function() {
  $("#search").click(function() {
    var searchTerm = "usa";
    var url1 = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: url1,
      async: false,
      dataType: "json",
      success: function(data) {
        console.log(data);
      },
      error: function(errorMessage) {
        alert("Error");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="search">Click</button>

​

Answer 2

我想你的jQuery选择器有问题。确保您也在加载jQuery。

$("searchTerm") tries to find <searchTerm>

和

$("search") tries to find <search>

尝试使用ID和类，如..。

$('#search') looks for <input type="text" id="search">
$('.search') looks for <input type="text" class="search">
$('input[type="text"]') looks for <input type="text">

$('#searchBtn') looks for <button id="search">Click Me</button>
$('.searchBtn') looks for <button class="search">Click Me</button>
$('button') looks for <button>Click Me</button>

这里要注意的重要部分是类和is可以用来选择大多数类型的元素。所以#搜索可以是一个按钮，文本输入，文本区域，任何东西。或者你可以选择一个元素，就像你想要做的那样。

示例：https://jsfiddle.net/gfa6agok/9/ -您将看到控制台输出

Answer 3

在您的代码区域中的：

  $("search").click(function() {
    var searchTerm = $("searchTerm").val();

您使用的是类还是ID？如果使用的是类，则搜索和searchTerm将有一个点(.)在它面前是这样：

  $(".search").click(function() {
    var searchTerm = $(".searchTerm").val();

如果您使用的是ID，搜索和searchTerm前面将有一个数字符号(#)，如下所示：

  $("#search").click(function() {
    var searchTerm = $("#searchTerm").val();