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

我认为您的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>

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

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

Answer 2

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

对于课程，请写下$(".search")
对于ID，请写$("#search")

以下代码适用于我。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Ajax在CodePen中不起作用

3 个答案: