尝试获取资源时，通过单击事件侦听器获取Javascript API:TypeError:NetworkError

我想单击一个按钮以使用JavaScript获取显示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（“单击”），函数（事件）{
event.preventDefault（）；
//var startdate=document.getElementById（“启动器”）；
//var enddate=document.getElementById（“enddate”）；
变量url=”https://api.nasa.gov/planetary/apod?api_key=key"; 
获取（url{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”
},
模式：“cors”，
捕获：“默认”
}).然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（Error）；
}
}).then（功能（数据）{
控制台日志（数据）；
}).catch（函数（错误）{
console.log（错误）；
});
});试试这个，我添加了
事件.preventDefault（）
这将阻止页面刷新。另外，不要忘记使用服务提供商提供的正确API密钥


var search=document.getElementById（“search”）；
search.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
//var startdate=document.getElementById（“启动器”）；
//var enddate=document.getElementById（“enddate”）；
变量url=”https://api.nasa.gov/planetary/apod?api_key=key"; 
获取（url{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”
},
模式：“cors”，
捕获：“默认”
}).然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（Error）；
}
}).then（功能（数据）{
控制台日志（数据）；
}).catch（函数（错误）{
console.log（错误）；
});
});获取请求不需要选项，
此外，还需要防止重新加载页面

下面是一个完整的工作示例


var search=document.getElementById（“search”）；
search.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
取回（“https://api.nasa.gov/planetary/apod?api_key=key_obtained_from_nasa")
.然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}
抛出新错误（）；
}).then（result=>console.log（result））
.catch（函数（响应）{
log（'错误！请重试'）；
});
})





搜寻
获取请求不需要选项，
此外，还需要防止重新加载页面

下面是一个完整的工作示例


var search=document.getElementById（“search”）；
search.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
取回（“https://api.nasa.gov/planetary/apod?api_key=key_obtained_from_nasa")
.然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}
抛出新错误（）；
}).then（result=>console.log（result））
.catch（函数（响应）{
log（'错误！请重试'）；
});
})





搜寻
您是否尝试过使用他们的api密钥？您发布的url无效。您是否尝试使用他们的api密钥？你发布的url无效，谢谢兄弟。它正在工作。。我故意没有显示apikey@KwasiKumi那么请接受答案。谢谢兄弟。它正在工作。。我故意没有显示apikey@KwasiKumi那么请接受答案。