Ajax 在 CodePen 中不工作

Question

我正在做来自 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");
      }
    });
  });
});

Answer 1

我认为您的 jQuery selector 有问题。确保您也正在加载 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 可用于 select 大多数类型的元素。所以#search 可以是一个按钮、文本输入、文本区域，任何东西。或者你可以 select 一个元素，就像你想做的那样。

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

Answer 2

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

对于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>

Answer 3

在您的代码区域中：

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

您使用的是 class 或 ID 吗？如果您使用的是 class，则搜索和搜索词的前面会有一个点 (.)，如下所示：

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

如果您使用的是 ID，则搜索和搜索词的前面会有一个井号 (#)，如下所示：

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

Ajax 在 CodePen 中不工作

Ajax not working in CodePen

javascript

ajax

jquery

codepen