Ajax 在 CodePen 中不起作用答案

【问题标题】：Ajax not working in CodePenAjax 在 CodePen 中不起作用
【发布时间】：2017-06-23 19:51:51
【问题描述】：

我正在做 freeCodeCamp 的 Wikipedia Viewer 项目。由于某种原因，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");
      }
    });
  });
});

【问题讨论】：

$("search") - 是 class 还是 id？

标签： javascript jquery ajax codepen

【解决方案1】：

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

对于一个类，写$(".search")
对于一个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>

【讨论】：

【解决方案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>

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

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

【讨论】：

按钮ID不应该是search而不是#search吗？

【解决方案3】：

在代码的这个区域：

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

您使用的是班级还是 ID？如果您使用的是一个类，则 search 和 searchTerm 前面会有一个点 (.)，如下所示：

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

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

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

【讨论】：