使用CLICK事件侦听器提取Javascript API：尝试提取资源时的TypeError：NetworkError

Question

我想单击一个按钮来使用JavaScript Fetch显示API数据，但在尝试获取资源时遇到了TypeError：NetworkError的麻烦。

我认为这与HTML表单有关。如果有人能帮我这个。我正试着从NASA的API中获取数据。

var search = document.getElementById("search");
 search.addEventListener("click",function(){
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if(response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.log(data);
   }).catch(function(error){
       console.log(error);
   });
 });

下面是HTML表单

<form>
 <input type="date" id="startdate" placeholder="enter a start date"><br>
<input type="date" id="enddate" placeholder="enter a start date"><br>
<button type="submit" id="search">Search</button>
</form>

谢谢

Answer 1

试试看，我已经添加了event.preventdefault()这将阻止页面刷新。另外，不要忘记使用服务提供商提供的适当的API密钥。

 var search = document.getElementById("search");
 search.addEventListener("click",function(event){
 event.preventDefault();
 //var startdate = document.getElementById("starter");
 //var enddate = document.getElementById("enddate");
 var url = "https://api.nasa.gov/planetary/apod?api_key=key"; 
  fetch(url,{
      method:"GET",
      headers:{
          "Content-Type":"application/json"
      },
      mode:"cors",
      catch:"default"
  }).then(function(response){
       if(response.ok){
           return response.json();
       }else{
           throw new Error(Error);
       }
   }).then(function(data){
       console.log(data);
   }).catch(function(error){
       console.log(error);
   });
 });