尝试获取资源时使用单击事件侦听器获取的JavaScript API：TypeError：NetworkError

问题描述

我想单击一个按钮以使用JavaScript Fetch显示API数据，但在尝试提取资源时，TypeError：NetworkError遇到问题。

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

JS代码在下面

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>

谢谢

推荐答案

尝试一下，我已添加了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);
   });
 });