Ajax funktioniert nicht im CodePen

Question

Ich mache das Wikipedia Viewer Projekt von freeCodeCamp. Aus irgendeinem Grund funktioniert die Ajax-Funktion nicht, da beim Klicken nichts in der Konsole angezeigt wird. Der Code dafür ist unten gezeigt. Vielen Dank im Voraus an alle, die dies sehen.

$(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

erneut prüfen die search und searchTerm sehen. Sind sie id oder class?

1. Für eine Klasse, schreiben $(".search")
2. für eine ID, schreiben $("#search")

Der folgende Code funktioniert für mich.

$(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

Ich denke, Sie haben ein Problem mit Ihrem jQuery-Selektor. Stellen Sie sicher, dass Sie auch jQuery laden.

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

und

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

Versuchen IDs und Klassen wie ..

$('#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> 

Der wichtige Teil mit hier zu beachten ist, Klassen und IDs verwendet werden, können die meisten Arten von Elementen auszuwählen. So könnte #search eine Schaltfläche, Texteingabe, Textbereich, irgendetwas sein. Oder Sie können ein Element auswählen, etwa wie Sie es versucht haben.

Beispiel: https://jsfiddle.net/gfa6agok/9/ - Sie Konsolenausgabe

Answer 3

In diesem Bereich des Codes:

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

Verwenden Sie eine Klasse oder ID? Wenn Sie eine Klasse die Suche verwenden und search einen Punkt vor ihm haben würde wie folgt (.):

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

Wenn Sie verwenden eine ID, um die Suche und search würde ein Nummernzeichen (#) davor wie folgt:

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