单击按钮显示API数据

时间:2020-04-24 08:00:18

标签: javascript html api

我想制作其他新闻提要,并在点击时触发它们。目前,我的网站上有其他子页面,当我单击该页面时,它会将我重定向到另一页面上,API会显示该信息。看起来像这样。 任何想法,我可以如何设置相同的方式,但要触发按钮上的api,而无需在另一页上进行重定向。理想-我想要一个可以保留不同新闻提要并在点击时触发不同新闻的容器。 很抱歉出现问题,API的新手。

$(document).ready(function(){

let url = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-04-01&to=2020-04-20&apiKey=APIKEY";
$.ajax({
  url:url, 
  method: "GET", 
  dataType: "Json",

  beforeSend: function(){
    $(".progress").show();
  },

  complete: function(){
    $(".progress").hide();
  },

  success: function(news){
    let output = "";
    let latestNews = news.articles;
    for(var i in latestNews) {
      output +=`
        <div class="col">
          <div class="card-content">
          <h5><a href="${latestNews[i].url}">${latestNews[i].title}</a></h5>
          </div>
          </div>
          <div class="published">
          <h6>${latestNews[i].publishedAt}</h6>
          </div>
          <div class"card-reveal">
          <p>${latestNews[i].description}</p>
        </div>
      `;
    }
    if(output !== ""){
      $("#newsResults").html(output);
    }

  },

  error: function(){
    $("#newsResults").html("Some error occured");
  }
})

});

1 个答案:

答案 0 :(得分:0)

您可以像这样使用jQuery将监听器添加到按钮单击中:

// Suppose your button has id='target'
$( "#target" ).click(function() {
  your api call here
});

https://api.jquery.com/click/