無法從維基百科獲取數據API

Question

我正在「維基百科查看器」項目上工作，您在此輸入搜索詞並查看維基百科搜索結果列表，但它的編號爲遠不是完整。

到現在爲止，我剛纔編寫了代碼來顯示第一個搜索項。但它不起作用。

我的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>

我的CSS：

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

我的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)); 
 

 
     }); 
 
    }); 
 
    }); 
 

我要去哪裏錯了？當我在Codepen中運行代碼並檢查控制檯時，它顯示「TypeError：document.getElementById（...）爲null」的錯誤。 我的項目上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)); 

     }); 
    }); 
    }); 

更新與此您的JS代碼。 ID通過「搜索」而不是「＃搜尋」

UPDATE得值：要添加標題，你可以做以下

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

     }); 
     });