在按钮单击时显示API数据

Question

我想使不同的新闻馈送，并触发他们点击。目前我在我的网站上有不同的子页面，当我点击那里时，它会将我重定向到另一个页面，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");
  }
})

})；

Answer 1

您可以使用jQuery将监听器添加到按钮单击，如下所示：

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

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