Ich kann keine Daten von Wikipedia API

Question

Ich arbeite an einem 'Wikipedia Viewer' Projekt, wo Sie einen Suchbegriff eingeben und eine Liste von Wikipedia-Suchergebnissen sehen, aber es ist weit von komplett.

Bis jetzt habe ich gerade den Code geschrieben, um den ersten Suchbegriff anzuzeigen. Aber es funktioniert nicht.

Mein HTML:

<div class="container-fluid"> 
 

 
<div class="searchAndButtons"> 
 
    
 
<input type="text" id="search"> 
 
    <button class="btn" id="searchBut">Search</button> 
 
    <form action="https://en.wikipedia.org/wiki/Special:Random"><button class="btn">Random Wiki Article</button> 
 
    </form> 
 
    </div> 
 
    <div class="searchResults"> 
 
    </div> 
 
    
 
    
 
    </div>

Meine CSS:

.container-fluid{ 
 
    padding:5%; 
 
} 
 
.searchAndButtons{ 
 
    text-align:center; 
 
}

Mein Javascript:

$(document).ready(function(){ 
 
    $("#searchBut").on("click",function(){//this is click handler 
 
    var searchTerm=document.getElementById("#search").value; 
 
    searchTerm=searchTerm.replace(/\s/g,"+"); 
 
    
 
    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){ 
 
     $(".searchResults").html(JSON.stringify(json)); 
 

 
     }); 
 
    }); 
 
    }); 
 

Wohin gehe ich falsch? Wenn ich den Code in Codepen ausführen und die Konsole überprüfen, zeigt es einen Fehler "TypeError: document.getElementById (...) ist NULL". Mein Projekt auf codepen - link

Answer 1

$(document).ready(function(){ 
    $("#searchBut").on("click",function(){//this is click handler 
    var searchTerm=document.getElementById("search").value; 
    searchTerm=searchTerm.replace(/\s/g,"+"); 

    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1",function(json){ 
     $(".searchResults").html(JSON.stringify(json)); 

     }); 
    }); 
    }); 

Aktualisieren Sie Ihre JS-Code mit diesem. id bekommt Wert von ‚Suche‘ nicht ‚#search‘

UPDATE: Header hinzuzufügen können, die folgende

$(document).ready(function(){ 
     $("#searchBut").on("click",function(){//this is click handler 
     var searchTerm=document.getElementById("search").value; 
     searchTerm=searchTerm.replace(/\s/g,"+"); 



    $.ajax({ 
       url: 'http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles="+searchTerm+"&rvprop=content&format=json&rvsection=0&rvparse=1', //your request URL 
       type: 'GET', 
       dataType: 'json', 
       success: function() { alert('hello!'); }, 
       error: function() { alert('boo!'); }, 
       beforeSend: setHeader 
      }); 
      }); 

      function setHeader(xhr) { 
      xhr.setRequestHeader('securityCode', 'Foo'); //your header key and value 
      } 

     }); 
     });