javascript - 无法从维基百科 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(...) is 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 通过“search”而不是“#search”获取值

更新:要添加 header ，您可以执行以下操作

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

        });
      });