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通过＆＃39; search＆＃39;获得价值不是＆＃39; #search＆＃39;

更新：要添加标题，您可以执行以下操作

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

        });
      });

无法从Wikipedia API获取数据

1 个答案: